Простое адаптивное модальное окно для сайта на HTML+CSS+jQuery
Я занимаюсь сайтами уже долгое время, и одной из своих слабых сторон до, так скажем, этой статьи я считал модальные окна. Я не приверженец готовых решений в виде громоздких модулей или плагинов, поэтому в большинстве случаев стараюсь писать и использовать свои наработки.
Долго я мучился, прописывая массу условий в CSS для различных экранов, пытаясь добиться адекватной адаптивности, и вот наконец вывел для себя формулу идеального (на мой взгляд) адаптивного и самое главное – простого модального окна, которым с удовольствием с вами сегодня поделюсь.
Наше модальное окно будет состоять из четырех элементов: верстки (HTML) самого окна и ссылки для его вызова, визуальной составляющей (CSS) и скрипта (jQuery), позволяющего нам вызывать и закрывать модальное окно по клику на нужный объект.
Перед тем как приступить, по традиции визуально покажу то, что в итоге у вас должно получиться:
Как вам? По-моему, более чем достаточно для того, чтобы на основе этого воплощать уже свои идеи.
Установка модального окна на сайт
Итак, что касается верстки модального окна, то она у нас выглядит следующим образом:
<div class="modal-overlay" data-modal="test">
<div class="modal-table">
<div class="modal-table-cell">
<div class="modal">
<button class="modal__close"></button>
<div class="modal__header">Небольшой заголовок</div>
<div class="modal__content">
<!-- Ваш контент -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien orci, dignissim vel orci sed, ornare tristique erat. Quisque dictum sagittis ipsum ac porttitor. Morbi condimentum feugiat feugiat. Sed commodo vel nunc eget imperdiet. Fusce posuere accumsan ipsum sed finibus. Fusce nibh lacus, varius non lacinia id, sodales eu justo. In commodo lorem nec purus hendrerit, sed semper libero mollis.</p>
<p>Integer accumsan ante non massa feugiat, quis congue odio luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo tortor cursus, imperdiet libero ac, efficitur lectus. Curabitur volutpat, lacus quis porttitor pretium, purus magna pulvinar odio, a posuere mauris tellus non erat. Phasellus in tincidunt est, in pulvinar mauris. Aenean aliquam malesuada leo.</p>
</div>
</div>
</div>
</div>
</div>В окне я разместил кнопку закрытия, заголовок и его содержимое (собственно все, как на скриншоте). По необходимости, которая, скорее всего, у вас может возникнуть, текст (как и заголовок) вы можете заменить, например, на видео, форму обратной связи, изображение или любой другой нужный вам элемент вашего веб-проекта.
Кнопка (в моем случае ссылка) вызова модального окна:
<button class="modal-link" data-modal="test">Открыть окно</button>Визуальная составляющая (CSS):
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .6);
overflow: auto;
z-index: 999;
transition: .4s all;
opacity: 0;
visibility: hidden;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.modal-overlay *,
.modal-overlay *:before,
.modal-overlay *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
.modal-overlay_visible {
opacity: 1;
visibility: visible;
}
.modal-table {
display: table;
width: 100%;
height: 100%;
}
.modal-table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 0 15px;
}
.modal {
transition: .4s all;
display: inline-block;
padding: 35px 45px 20px 30px;
max-width: 400px;
width: 100%;
background: #fff;
box-shadow: 0px 4px 8px rgba(0, 0, 0, .25);
color: #333;
text-align: left;
font-family: Arial;
margin: 30px 0;
transform: translate(0, 20%);
position: relative;
border-radius: 4px 6px 4px 4px;
cursor: auto;
font-size: 16px;
}
.modal-overlay_visible .modal {
transform: translate(0);
}
.modal__header {
font-size: 22px;
font-weight: 400;
padding: 0 0 30px 0;
}
.modal__content p {
padding: 0 0 10px 0;
margin: 0;
}
.modal__close {
position: absolute;
right: 10px;
top: 0;
background: #da4d43;
width: 25px;
height: 25px;
border-radius: 0 0 4px 4px;
transition: .4s all;
padding: 0;
border: none;
cursor: pointer;
}
.modal__close:hover {
background: #ed5f55;
}
.modal__close:before,
.modal__close:after {
content: "";
display: block;
height: 16px;
width: 1px;
transform: rotate(45deg);
background: #fff;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0;
}
.modal__close:after {
transform: rotate(-45deg);
}И, непосредственно, скрипт вызова и закрытия модального окна:
$(document).ready(function() {
// Функция открытия модального окна
$(".modal-link").on("click", function() {
$('.modal-overlay[data-modal="'+$(this).data('modal')+'"]').addClass("modal-overlay_visible");
});
// Функция закрытия модального окна нажатием на кнопку
$(".modal__close").on("click", function() {
$(".modal-overlay").removeClass("modal-overlay_visible");
});
// Функция закрытия модального окна нажатием вне окна
$(document).on("click", function(e) {
if($(".modal-overlay_visible").length) {
// Если есть открытое окно
if(!$(e.target).closest(".modal").length && !$(e.target).closest(".modal-link").length) {
// Если нажали вне его контента и не на ссылку вызова
$(".modal-overlay").removeClass("modal-overlay_visible");
}
}
});
});Два последних блока кода вы вставляете в соответствующие файлы вашего сайта. Не забывайте про подключение библиотеки jQuery, если она отсутствует на вашем сайте. На этом установка заканчивается.
На что здесь стоит обратить внимание?
- Высота модального окна автоматическая и зависит от его содержимого. Если высота модального окна превышает высоту экрана, ему добавляется вертикальная прокрутка.
- Связь кнопки вызова модального окна с самим окном настраивается посредством наличия атрибута «data-modal» у обоих составляющих с одинаковым содержимым (в нашем случае - это «test»).
- У элемента (это не обязательно должна быть ссылка), вызывающего модальное окно, обязательно должен быть прописан класс «modal-link».
- Закрытие окна происходит путем нажатия на соответствующую кнопку и его фон.
- Модальное окно можно внедрить на любую CMS (WordPress, Joomla!, 1С-Bitrix, DataLife Engine и другие). Хотя, если говорить о DLE, то в ней уже заложен функционал модальных окон. Подробнее это этом здесь.
На этом всё, чем я хотел с вами сегодня поделиться. Если какие-то моменты для вас показались сложными – пишите об этом в комментариях под данным постом.
