Всем привет, сегодня я покажу вам несколько способов как можно сделать 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');
})
}
