Адаптивное модальное окно на нативном JavaScript и jQuery.

Всем привет, сегодня я покажу вам несколько способов как можно сделать popup окно с контентом. Мы рассмотрим вариант создания модального окна, как на jQuery, так и на нативном JavaScript. С помощью данного скрипта можно добавить на одну страницу несколько модальных окон.

CSS

/*главный контейнер для модального окна*/
/*
в стилях должно учитываться главное условие - значение свойства z-index у .modalWrapper должно быть меньше чем у .backBlack, а у .backBlack  должно быть меньше, чем у .modalContent 
*/
.modalWrapper {
    display: none;
    flex-direction: center;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 20;
}
.modalWrapper.active {
    display: flex;
}
.backBlack {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
}
.modalWrapper .modalContent {
    position: relative;
    background: #fff;
    padding: 20px 10px 30px;
    width: 100%;
    max-width: 350px;
    z-index: 40;
}
/*кнопка закрытия модального окна*/
.modalWrapper .butExit {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
.modalWrapper .butExit svg {
    width: 15px;
    height: 15px;
} 
.modalWrapper .headingModal {
    text-align: center;
    font-size: 20px;
    margin-bottom: 10px;
}

HTML

/*кнопка открытия модального окна с идентификатором #typeModal_2 */
<a class="testBut" data-modal-id="#typeModal_2">Открыть 2</a>

/*ID у контейнера модального окна должен быть уникальный*/
<div id="typeModal_2" class="modalWrapper">
    /* backBlack - элемент заднего фона, по нажатию на который будет закрываться окно*/
    <div class="backBlack"></div>
    <div class="modalContent">
       /*butExit - кнопка крестика закрывающая модальное окно*/
        <div class="butExit">
            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
                <g>
                    <g>
                        <path d="M284.286,256.002L506.143,34.144c7.811-7.811,7.811-20.475,0-28.285c-7.811-7.81-20.475-7.811-28.285,0L256,227.717
                            L34.143,5.859c-7.811-7.811-20.475-7.811-28.285,0c-7.81,7.811-7.811,20.475,0,28.285l221.857,221.857L5.858,477.859
                            c-7.811,7.811-7.811,20.475,0,28.285c3.905,3.905,9.024,5.857,14.143,5.857c5.119,0,10.237-1.952,14.143-5.857L256,284.287
                            l221.857,221.857c3.905,3.905,9.024,5.857,14.143,5.857s10.237-1.952,14.143-5.857c7.811-7.811,7.811-20.475,0-28.285
                            L284.286,256.002z"/>
                    </g>
                </g>
        
            </svg>
        </div>
        /*контентная часть модального окна*/
        <div class="contentBlock">
            <div class="headingModal">Моё модальное окно</div>
            <form action="" class="modalForm">
                <input type="text">
                <input type="text">
                <input type="text">
            </form>
        </div>
    </div>
</div>

jQuery

/* вешаем функцию обработчик событий на кнопку для открытия модального окна */
$('.testBut').on('click', function() {
    let idModal = $(this).attr('data-modal-id');
    openModal(idModal)
})

function openModal(id_modal) {
    /*записываем в переменную наше модальное окно*/
    let modalWindow = $(id_modal);

    /*проверяем есть ли у модального окна класс (то есть открыто ли оно)*/
    if(modalWindow.hasClass('active')) {
        /*если ЕСТЬ, то удаляем класс "active" и ЗАКРЫВАЕМ окно*/
        modalWindow.removeClass('active')
    }
    else {
        /*если НЕТ, то добавляем класс "active" и ОТКРЫВАЕМ окно*/
        modalWindow.addClass('active')
    }
    
    /*если нажали на иконку крестика, то закрываем окно*/
    modalWindow.find('.butExit').on('click', function() {
        modalWindow.removeClass('active');
    })

    /*если нажали на поле вне окна, то закрываем окно*/
    modalWindow.find('.backBlack').on('click', function() {
        modalWindow.removeClass('active');
    })

}

Реализация с использование нативного JavaScript

/* вешаем функцию обработчик событий на кнопку для открытия модального окна */
let testBut = document.querySelector(".testBut");

testBut.addEventListener('click', function() {
    let idModal = this.getAttribute('data-modal-id');
    openModal(idModal)
})


function openModal(id_modal)  {

    /*записываем в переменную наше модальное окно*/
    let modalWindow = document.querySelector(id_modal);

    if(modalWindow.classList.contains("active")) {
        modalWindow.classList.remove('active');
    }
    else {
        modalWindow.classList.add('active');
    }

    let butExit = modalWindow.querySelector('.butExit');
    
    /*если нажали на иконку крестика, то закрываем окно*/
    butExit.addEventListener('click', function() {
        modalWindow.classList.remove('active');
    })

    let backBlack = modalWindow.querySelector('.backBlack');

    /*если нажали на поле вне окна, то закрываем окно*/
    backBlack.addEventListener('click', function() {
        modalWindow.classList.remove('active');
    })

}

На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime