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

Содержимое:

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

Это простая реализация модального окна, которая позволяет размещать неограниченное количество окон на одну страницу. Функционал модального окна записан в одну функцию, поэтому легко запускается.

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

CSS

По стилям все просто. Здесь мы прописываем стили для основных блоков, таких как .modalWrapper – это главный контейнер. Из интересного здесь только элемент .blackBack -это элемент который будет создавать задний притемнённый фон, а делее будет обрабатывать нажатие и закрывать модальное окно.

/*главный контейнер для модального окна*/
/*
в стилях должно учитываться главное условие - значение свойства 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

Модальное окно состоит из следующих частей:

  • кнопки которая запускает модальное окно, в моё случае – .testBut. Этой кнопке нам нужно указать в атрибуте data-modal-id идентификатор модального окна ( обязательно со знаком # )
  • главный контейнер модального окна, это элемент с классом modalWrapper. В нём будет распологаться всё составляющая модального окна.
  • .backBlack – задний тёмный фон, по нажатию на который закрывается модельное окно
  • .modalContent – это блок с контентов. В нём находятся текст модального окна и форма
/*кнопка открытия модального окна с идентификатором #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

Логика написания модального окна с использование jQuery и нативного JS очень похожи, мы просто проверяем наличие класса active у элемента. Здесь я этого я создаю функцию openModal которая будет проводить проверку.

/* вешаем функцию обработчик событий на кнопку для открытия модального окна */
$('.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

Реализация на нативном 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