JavaScript для верстальщика. Урок 11. Улучшение модального окна

Добавление элемента на страницу возможно не только через html, но и через js. Покажем как это реализуется на примере оверлея, который появляется при открытии модального окна.
Код оверлея в html разметке:
 <div class = "overlay" id = "js-overlay"></div>
Оверлей находится внутри тега body

Код добавления элемента через js

$(body).append("<div class = 'overlay' id = 'js-overlay'></div>");

Особенностью является то, что если в  js используются двойные кавычки, кавычки в коде элемента нужно изменить на одинарные.
Метод append() добавляет элемент в конц тега, метод prepend() - в начало тега.

При добавлении модального окна мы уже задействовали тег body, добавляя ему класс при помощи метода addClass

Сейчас для этого же элемента нам нужно добавить ещё один метод. Можно не писать его каждый раз заново, а писать цепочку методов через точку

$("body").append("<div class='overlay' id='js-overlay'></div>").addClass("open-modal");

В html-разметке убираем код оверлея, в css в свойствах оверлея убираем display:none, убеждаемся, что при клике по кнопке, открывающей модальное окно, появляется и оверлей тоже.

Чтобы убрать оверлей при закрытии модального окна используем метод remove()

$("#js-overlay").remove();

Ещё один момент. Прежде мы добавляли возможность закрыть модальное окно кликом по оверлею:

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

        e.preventDefault();
        $(".js-modal").fadeOut(100);
        $("body").removeClass("open-modal");
        $("#js-overlay").remove();

    });

Сейчас эта возможность не работает, поскольку оверлея нет в разметке и в момент загрузки код его не находит. Нужно немного изменить код:

 $("body").on("click", "#js-overlay", function() {
        $(".js-modal").fadeOut(100);
        $("body").removeClass("open-modal");
        $("#js-overlay").remove();
    });

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

 /* Modals
    ====================================*/

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

        e.preventDefault();

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

        $(currentModal).fadeIn(500);
        $("body").append("<div class='overlay' id='js-overlay'></div>").addClass("open-modal");

    });


    $(".js-modal-close").on("click", function(e) {

        e.preventDefault();
        $(".js-modal").fadeOut(100);
        $("body").removeClass("open-modal");
        $("#js-overlay").remove();

    });


    $("body").on("click", "#js-overlay", function() {
        $(".js-modal").fadeOut(100);
        $("body").removeClass("open-modal");
        $("#js-overlay").remove();
    });