JavaScript для верстальщика. Урок 07. Создание модального окна

Задача - создать функцию появления и исчезновения всплывающего модального окна по клику.
Для этого смотрим раздел Effects http://api.jquery.com/category/effects/
Нас интересуют два эффекта:  .fadeIn() и .fadeOut() - соответственно, появление и исчезновение элемента.

Кроме модального окна будет появляться и исчезать полупрозрачный оверлей, полоса прокрутки и, в итоге, мы сделаем так, чтобы код работал для разных модальных окон, которые могут быть на странице.

Модальному окну присваиваем класс js-modal, так как модальных окон может быть много и логику для всех лучше прописать одну. И добавляем id = "js-modal-login", чтобы отличить от других модальных окон. Этот же id прописываем в атрибуте href  ссылки, при клике по которой окно должно появляться. Для этой ссылки также прописываем класс js-show-modal. Класс, а не id, опять же потому, что подобных ссылок, при клике по которым должны открываться модальные окна, на странице может быть несколько.

 Модальное окно должно открываться по клику. Описываем событие клика:

$(".js-show-modal").on("click", function(event) {

    });

Отменяем событие по умолчанию

event.preventDefault();

И указываем, что при клике нужно показать модальное окно с классом js-modal.

$(".js-modal").fadeIn();

 В скобках после .fadeIn() можно указать время в миллисекундах или слова fast, slow, или оставить скорость появления по умолчанию и ничего не писать.

Если хотим, чтобы по клику появлялось не только модальное окно, но и оверлей, его id= "js-overlay" прописываем в коде через запятую:

$(".js-modal, #js-overlay").fadeIn();

При появлении модального окна должна исчезать полоса прокрутки.
Для этого в css прописываем свойство

 .open-modal {
        overflow-y: hidden;
        padding-right: 17px;
    }


Здесь overflow-y: hidden; отвечает за исчезновение вертикальной полосы прокрутки, а padding-right: 17px; сдвигает документ на ширину исчезнувшей полосы.

Добавляем класс .open-modal при открытии модального окна, а при закрытии, соответственно, убираем.
$("body").addClass("open-modal");
$("body").removeClass("open-modal");
 
Код открытия модального окна, появления оверлея, исчезновения полосы прокрутки:

$(".js-show-modal").on("click", function(event) {
    event.preventDefault();

    $(".js-modal, #js-overlay").fadeIn();

    $("body").addClass("open-modal");
 
});

Соответственно. код закрытия будет выглядеть как

$(".js-modal-close").on("click", function(event) {
    event.preventDefault();

    $(".js-modal, #js-overlay").fadeOut();

    $("body").removeClass("open-modal");
 
});

Здесь .js-modal-close - класс кнопки, при клике по которой модальное окно должно закрыться.

Ну и теперь усовершенствуем функцию, чтобы она работала для разных модальных окон на странице.

Как говорили выше, id модального окна прописываем в атрибуте href  ссылки, при клике по которой окно должно появляться.

Теперь при клике на данную кнопку мы сначала получим атрибут href, и откроем именно это модальное окно.

Код получения атрибута href той ссылки, по которой кликнули, и сохранения его в переменную currentModal:

var currentModal = $(this).attr("href");

И теперь вместо класса .js-modal мы открываем модальное окно с id, которое сохранено в переменной currentModal
То есть код  

$(".js-modal, #js-overlay").fadeIn(); заменится на  

$(currentModal + " ,#js-overlay").fadeIn();

Немного неожиданная запятая внутри кавычек нужна, чтобы при сложении двух аргументов currentModal, которому соответствует селектор #js-modal-login и
#js-overlay получить (#js-modal-login, #js-overlay)

Для закрытия модального окна присваивать id кнопке, которая будет модальное окно закрывать, нет необходимости, так как открытым на странице в данный момент может быть только одно модальное окно. Поэтому достаточно селектора класса.

Небольшое усовершенствование: возможность закрыть модальное окно по клику не только по кнопке, но и по оверлею.

Было:

$(".js-modal, #js-overlay").fadeOut();

Стало:

$(".js-modal, #js-overlay").fadeOut();

 Код полностью:

$(".js-show-modal").on("click", function(event) {

        e.preventDefault();

        var currentModal = $(this).attr("href");

        $(currentModal + ", #js-overlay").fadeIn(500);

        $("body").addClass("open-modal");

    });



   $("#js-overlay, .js-modal-close").on("click", function(event) {

        event.preventDefault();
       
        $(".js-modal, #js-overlay").fadeOut();

        $("body").removeClass("open-modal");

    });

Мы использовали два метода:
fadeIn() - открыть окно
fadeOut - закрыть окно

Вместо них могут использоваться методы
show - открыть окно
hide - закрыть окно

Отличие в том, что первые методы обеспечивают плавное появление окна, а два последних никаких эффектов плавности не имеют.