Всплывающее окно, похожее на behance?

Question

[Evgeniy V.]

Как сделать такое же окно как на behance https://www.behance.net/gallery/44932277/Web-Universal )? Нужно только окно, которое появится при нажатии на ссылку и закроется и при нажатии на фон. 100% есть готовые решения, поделитесь пожалуйста.

Answer 1

[Евгений]

На JQuery такой код пользую. Каждая модалка - отдельный блок с классом .modal, все модалки в блок #overlay

/*Модальные окна*/
    var overlay = $('#overlay'); 
    var open_modal = $('.open_modal'); 
    var close = $('.modal__close'); 
    var modal = $('.modal'); 

    // для открытия модалки нужна ссылка вида <a href="#name"></a> и класс "open_modal"
    // будет открыта модалка с id="name"
    open_modal.on('click', function(event){
        modal.fadeOut(200);
        event.preventDefault(); 
        var div = $(this).attr('href'); 
        overlay.fadeIn(400);
        $(div).fadeIn(400);
        $('html, body').addClass('j-noScroll');
        baseBoxHeight = $('.mobile-menu__right').height();
    });

    close.on('click', function() {
        modal.fadeOut(200);
        overlay.fadeOut(200);
        $('html, body').removeClass('j-noScroll');
    });

    overlay.on('click', function(event) {
        if ( $( event.target ).attr('id') == 'overlay' ) {
            $(this).fadeOut(200);
            modal.fadeOut(200);
            $('html, body').removeClass('j-noScroll');
        }
    });

Comments

[Евгений]

либо любой лайтбокс плагин на выбор