Как сделать модальное окно на css

25.11.2023

Модальные окна на CSS

Три разных примера создания модальных окон на чистом CSS.

Первый с использованием HTML-элемента , второй с флажком , а третий с псевдоклассом :target

Вариант с использованием HTML-элемента

В этом примере каждая кнопка открывает одно конкретное всплывающее окно, расположенное под ней.

Закрытие окна происходит по клику вне его области, а крестик показывается как декорация.

Пример:

Модальное окно 1

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis.

Модальное окно 2

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

HTML:

Название кнопки

Текст в модальном окне

CSS:

/* Контейнер для кнопки, чтобы не прыгал контент, когда она сменит позиционирование */
.css-modal-details < height : 60px ; display : flex ; align-items : center ; justify-content : center ; /* Кнопка для открытия */ .css-modal-details summary < display : inline-flex ; margin : 10px ; text-decoration : none ; position : relative ; font-size : 20px ; line-height : 20px ; padding : 12px 30px ; color : #FFF ; font-weight : bold ; text-transform : uppercase ; font-family : 'Roboto' , Тahoma, sans-serif ; background : #337AB7 ; cursor : pointer ; border : 2px solid #BFE2FF ; overflow : hidden ; .css-modal-details summary:hover, .css-modal-details summary:active, .css-modal-details summary:focus < color : #FFF ; .css-modal-details summary:before < position : absolute ; right : -50px ; border-right : 50px solid transparent ; border-top : 50px solid #2D6B9F ; transition : transform 0.5s ; transform : translateX ( -100% ) ; .css-modal-details summary:hover:before, .css-modal-details summary:active:before, .css-modal-details summary:focus:before < transform : translateX ( 0 ) ; /* Кнопка при открытом окне переходит на весь экран */ .css-modal-details details[open] summary < cursor : default ; opacity : 0 ; position : fixed ; width : 100% ; height : 100% ; /* Контейнер, который затемняет страницу */ .css-modal-details details .cmc < display : flex ; align-items : center ; justify-content : center ; .css-modal-details details[open] .cmc < pointer-events : none ; position : fixed ; width : 100% ; height : 100% ; animation : bg 0.5s ease ; background : rgba ( 51, 122, 183, 0.7 ) ; /* Модальное окно */ .css-modal-details details .cmt < font-family : Verdana, sans-serif ; font-size : 16px ; padding : 20px ; max-width : 600px ; max-height : 70% ; transition : 0.5s ; border : 6px solid #BFE2FF ; border-radius : 12px ; background : #FFF ; box-shadow : 0 4px 12px rgba ( 0,0,0,0.2 ) , 0 16px 20px rgba ( 0,0,0,0.2 ) ; text-align : center ; overflow : auto ; .css-modal-details details[open] .cmt < animation : scale 0.5s ease ; pointer-events : auto ; /* Декоративная кнопка с крестиком */ .css-modal-details details[open] .cmc:after < width : 50px ; height : 50px ; border : 6px solid #BFE2FF ; border-radius : 12px ; position : absolute ; z-index : 10 ; right : 20px ; box-shadow : 0 4px 12px rgba ( 0,0,0,0.2 ) , 0 16px 20px rgba ( 0,0,0,0.2 ) ;

background-image : url ( «data:image/svg+xml;charset=UTF-8,%3csvg xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 24 24′ fill=’none’ stroke=’%23337AB7′ stroke-width=’3′ stroke-linecap=’round’ stroke-linejoin=’round’%3e%3cline x1=’18’ y1=’6′ x2=’6′ y2=’18’%3e%3c/line%3e%3cline x1=’6′ y1=’6′ x2=’18’ y2=’18’%3e%3c/line%3e%3c/svg%3e» ) ;

background-color : #FFF ;
background-size : cover ;
animation : move 0.5s ease ;
@keyframes scale < transform : scale ( 0 ) ; transform : scale ( 1 ) ; @keyframes move < right : -80px ; right : 20px ; @keyframes bg < background : rgba ( 51, 122, 183, 0 ) ; background : rgba ( 51, 122, 183, 0.7 ) ; Вариант с использованием флажка

В этом примере одно модальное окно может открываться любым количеством кнопок и располагаться где угодно, например, в подвале.

Закрытие окна происходит по клику на крестик.

Пример:

Модальное окно 1

Модальное окно 2

Модальное окно 1

HTML:

Название кнопки

Текст в модальном окне

CSS:

/* Контейнер для кнопки */
.css-modal-checkbox-container < height : 60px ; display : flex ; align-items : center ; justify-content : center ; /* Убираем флажок */ #css-modal-checkbox < display : none ; /* Кнопка для открытия */ .css-modal-checkbox < display : inline-flex ; margin : 10px ; text-decoration : none ; position : relative ; font-size : 20px ; line-height : 20px ; padding : 12px 30px ; color : #FFF ; font-weight : bold ; text-transform : uppercase ; font-family : 'Roboto' , Тahoma, sans-serif ; background : #337AB7 ; cursor : pointer ; border : 2px solid #BFE2FF ; overflow : hidden ; .css-modal-checkbox:hover, .css-modal-checkbox:active, .css-modal-checkbox:focus < color : #FFF ; .css-modal-checkbox:before < position : absolute ; right : -50px ; border-right : 50px solid transparent ; border-top : 50px solid #2D6B9F ; transition : transform 0.5s ; transform : translateX ( -100% ) ; .css-modal-checkbox:hover:before, .css-modal-checkbox:active:before, .css-modal-checkbox:focus:before < transform : translateX ( 0 ) ; /* Контейнер, который затемняет страницу */ #css-modal-checkbox + .cmc < display : none ; #css-modal-checkbox:checked + .cmc < display : flex ; align-items : center ; justify-content : center ; position : fixed ; width : 100% ; height : 100% ; animation : bg 0.5s ease ; background : rgba ( 51, 122, 183, 0.7 ) ; /* Модальное окно */ #css-modal-checkbox:checked + .cmc .cmt < font-family : Verdana, sans-serif ; font-size : 16px ; padding : 20px ; max-width : 600px ; max-height : 70% ; transition : 0.5s ; border : 6px solid #BFE2FF ; border-radius : 12px ; background : #FFF ; box-shadow : 0 4px 12px rgba ( 0,0,0,0.2 ) , 0 16px 20px rgba ( 0,0,0,0.2 ) ; text-align : center ; overflow : auto ; animation : scale 0.5s ease ; /* Кнопка с крестиком закрывающая окно */ .css-modal-close < width : 50px ; height : 50px ; border : 6px solid #BFE2FF ; border-radius : 12px ; position : absolute ; z-index : 10 ; right : 20px ; box-shadow : 0 4px 12px rgba ( 0,0,0,0.2 ) , 0 16px 20px rgba ( 0,0,0,0.2 ) ;

background-color : #FFF ;
background-size : cover ;
animation : move 0.5s ease ;
cursor : pointer ;
@keyframes scale < transform : scale ( 0 ) ; transform : scale ( 1 ) ; @keyframes move < right : -80px ; right : 20px ; @keyframes bg < background : rgba ( 51, 122, 183, 0 ) ; background : rgba ( 51, 122, 183, 0.7 ) ;

Вариант с использованием псевдокласса :target

Этот пример основан на способности якорных ссылок указывать на элементы, которые изначально скрыты на странице и тем самым использоваться в лайтбоксах. Такое модальное окно может открываться любым их количеством и располагаться где угодно, например, в подвале.

Закрытие окна происходит кликом на ссылку с другим якорем.

Пример:

HTML:

Текст в модальном окне

CSS:

/* Контейнер для кнопки */
.css-modal-target-container < height : 60px ; display : flex ; align-items : center ; justify-content : center ; /* Кнопка для открытия */ .css-modal-open < display : inline-flex ; margin : 10px ; text-decoration : none ; position : relative ; font-size : 20px ; line-height : 20px ; padding : 12px 30px ; color : #FFF ; font-weight : bold ; text-transform : uppercase ; font-family : 'Roboto' , Тahoma, sans-serif ; background : #337AB7 ; cursor : pointer ; border : 2px solid #BFE2FF ; overflow : hidden ; .css-modal-open:hover, .css-modal-open:active, .css-modal-open:focus < color : #FFF ; .css-modal-open:before < position : absolute ; right : -50px ; border-right : 50px solid transparent ; border-top : 50px solid #2D6B9F ; transition : transform 0.5s ; transform : translateX ( -100% ) ; .css-modal-open:hover:before, .css-modal-open:active:before, .css-modal-open:focus:before < transform : translateX ( 0 ) ; /* Контейнер, который затемняет страницу */ .css-modal-target < display : none ; .css-modal-target:target < display : flex ; align-items : center ; justify-content : center ; position : fixed ; width : 100% ; height : 100% ; animation : bg 0.5s ease ; background : rgba ( 51, 122, 183, 0.7 ) ; /* Модальное окно */ .css-modal-target .cmt < font-family : Verdana, sans-serif ; font-size : 16px ; padding : 20px ; max-width : 600px ; max-height : 70% ; transition : 0.5s ; border : 6px solid #BFE2FF ; border-radius : 12px ; background : #FFF ; box-shadow : 0 4px 12px rgba ( 0,0,0,0.2 ) , 0 16px 20px rgba ( 0,0,0,0.2 ) ; text-align : center ; overflow : auto ; animation : scale 0.5s ease ; /* Кнопка с крестиком закрывающая окно */ .css-modal-close < position : relative ; display : block ; .css-modal-close:after < width : 50px ; height : 50px ; border : 6px solid #BFE2FF ; border-radius : 12px ; position : fixed ; z-index : 10 ; right : 20px ; box-shadow : 0 4px 12px rgba ( 0,0,0,0.2 ) , 0 16px 20px rgba ( 0,0,0,0.2 ) ;

background-color : #FFF ;
background-size : cover ;
animation : move 0.5s ease ;
.css-modal-close:before < width : 100% ; height : 100% ; position : fixed ; cursor : default ; @keyframes scale < transform : scale ( 0 ) ; transform : scale ( 1 ) ; @keyframes move < right : -80px ; right : 20px ; @keyframes bg < background : rgba ( 51, 122, 183, 0 ) ; background : rgba ( 51, 122, 183, 0.7 ) ; Нравится 22 В закладки

Опубликовано: 01.08.2021 / Обновлено: 01.09.2022
Рубрики: Модальные окна
Метки: CSS, Авторское
20012 просмотров

Смотрите также:

Модальное окно для контактов

Модальное окно для контактов или социальных сетей с фиксированной кнопкой

QR-код для ссылки на страницу

Модальное окно с QR-кодом ссылки на текущую страницу

Создание сообщения об использовании куки (cookie)

Создание и установка модального окна с сообщением об использовании файлов cookies

Добавить комментарий:

Ваш комментарий отправлен!

Здравствуйте! Это лучшее и рабочее решение модального окна! Но подскажите, как сделать, чтобы кнопка не встраивалась в верстку сайта, а была поверх, например, прилипшая сбоку или внизу, поверх всех слоев сайта.

Alexander: 13.11.2023 в 09:41
Обычным позиционированием fixed
Павел: 17.11.2023 в 23:09

Как развернуть эту кнопку на 90 градусов и прилепить справа экрана, если начинаю ее крутить, то стили и модальное окно затрагивают. Не пойму к чему прицепиться.

Alexander: 20.11.2023 в 10:49
Например для варианта с target добавить так:
.css-modal-target-container
СЕРГЕЙ: 16.04.2023 в 19:46
Люди добрые! Подскажите, как вместо кнопки оформить ссылку на текст?
СЕРГЕЙ: 10.04.2023 в 23:55

Здравствуйте! А можно ли сделать так, чтобы окно открывалось при клике на текст с ссылкой? И на каждую ссылку отдельное окно?

Alexander: 11.04.2023 в 07:43
А чем последний вариант не устраивает?
Серега: 23.03.2023 в 05:40

Добрый день, а почему весь контент страницы пролетает сверху модального окна? Как можно сделать чтобы форма оставалась на верху всего контента?

Alexander: 24.03.2023 в 06:25
Попробуйте прибавить значение z-index
Алексей Ершов: 18.03.2023 в 15:17
Очень крутая работа. Взял себе. Спасибо.
Сергей: 13.02.2023 в 07:54

Здравствуйте.
Подскажите, пожалуйста, а как сделать два модальных окна, так чтобы второе можно было открыть из первого поверх него и не закрывая его?
Я уже пробовал сделать ссылку на второе модальное окно в тексте первого, но, открывая его, закрывается первое. А надо, чтобы оно оставалось на странице и было активно после закрытия второго окна.

Alexander: 13.02.2023 в 13:09
Какой именно вариант не получается?
Сергей: 13.02.2023 в 13:53
Спасибо, Alexander, что так быстро среагировали на вопрос.
Уже разобрался, все работает.
izi4: 23.07.2022 в 19:14

Здравствуйте Уважаемые!
Скажите пожалуйста, как позиционировать крестик в окне из примера N#1?
/* Декоративная кнопка с крестиком */

Alexander: 24.07.2022 в 12:38
Я так понимаю, вы хотите кнопку к окну подвинуть?
Можно так:
HTML

 Название кнопки
 Текст в модальном окне

/* Контейнер для кнопки, чтобы не прыгал контент, когда она сменит позиционирование */ .css-modal-details < height: 60px; display:flex; align-items:center; justify-content:center; >/* Кнопка для открытия */ .css-modal-details summary < display: inline-flex; margin: 10px; text-decoration: none; position: relative; font-size: 20px; line-height: 20px; padding: 12px 30px; color: #FFF; font-weight: bold; text-transform: uppercase; font-family: 'Roboto', Тahoma, sans-serif; background: #337AB7; cursor: pointer; border: 2px solid #BFE2FF; overflow: hidden; z-index: 1; >.css-modal-details summary:hover, .css-modal-details summary:active, .css-modal-details summary:focus < color: #FFF; >.css-modal-details summary:before < content: ''; position: absolute; top: 0; right: -50px; bottom: 0; left: 0; border-right: 50px solid transparent; border-top: 50px solid #2D6B9F; transition: transform 0.5s; transform: translateX(-100%); z-index: -1; >.css-modal-details summary:hover:before, .css-modal-details summary:active:before, .css-modal-details summary:focus:before < transform: translateX(0); >/* Кнопка при открытом окне переходит на весь экран */ .css-modal-details details[open] summary < cursor: default; opacity: 0; position: fixed; left: 0; top: 0; z-index: 3; width: 100%; height: 100%; >/* Контейнер, который затемняет страницу */ .css-modal-details details .cmc < display:flex; align-items:center; justify-content:center; >.css-modal-details details[open] .cmc < pointer-events: none; z-index: 4; position: fixed; left: 0; top: 0; width: 100%; height: 100%; animation: bg 0.5s ease; background: rgba(51, 122, 183, 0.7); display: flex; >/* Модальное окно */ .css-modal-details details[open] .cmt-wr < display: flex; width: 100%; max-width: 600px; max-height: 70%; margin: 0 10px; >.css-modal-details details .cmt < font-family: Verdana, sans-serif; font-size: 16px; padding: 20px; transition: 0.5s; border: 6px solid #BFE2FF; border-radius: 12px; background: #FFF; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); text-align: center; overflow: auto; >.css-modal-details details[open] .cmt < animation: scale 0.5s ease; z-index: 4; pointer-events: auto; width: 100%; >/* Декоративная кнопка с крестиком */ .css-modal-details details[open] .cmt-btn < content: ""; width: 50px; height: 50px; border: 6px solid #BFE2FF; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e"); background-color: #FFF; background-size: cover; animation: scale 0.5s ease; margin-left: 10px; flex: 0 0 50px; >/* Анимации */ @keyframes scale < 0% < transform: scale(0); >100% < transform: scale(1); >> @keyframes bg < 0% < background: rgba(51, 122, 183, 0); >100% < background: rgba(51, 122, 183, 0.7); >>

На само окно надвинуть нельзя, потому что этот крестик ничего не закрывает на самом деле.
Владимир: 23.11.2022 в 19:00

Читать:

Напишите программу которая находит среднее арифметическое всех чисел записанных в файле в столбик

Хорошего дня! А кнопку закрытия эту, цвет поменять ей и т.д. можно? Вроде не глупый запихал форму туда неплохую оптимизировал, не могу понять че с ним делать и все тут. Хочется поменьше его сделать и цвет поменять.

Простое модальное окно на CSS без JS

Простое модальное окно для сайта можно сделать используя только HTML и СSS код, без использования скриптов. Ведь большое количество скриптов, естественно, дают нагрузку на сайт и замедляют его работу.

Как вариант, посмотрите это простое модальное окно. Минимум кода, но вполне неплохо. Конечно оно не встанет вровень с модальными окнами jQuery, но все-же.

модальное окно на css

Простое модальное окно на CSS

Подробнее опишу установку простого модального окна.

Вот CSS код, который желательно поместить в таблицу стилей, обычно это style.css

.Window < position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.7); z-index: 99999; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none; >.Window:target < display: block; pointer-events: auto; >.Window > div < width: 300px; // меняем размер на нужный position: relative; margin: 10% auto; padding: 20px; border-radius: 5px; background: #f2f2f2; box-shadow: 0px 0px 20px 2px; >.close < background: #cc3300; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; >.close:hover

Регулируйте ширину модального окна меняя размер по ширине на нужный. В коде это место отмечено.

Ну и HTML код, который ставиться в нужное место. Это по сути ссылка на открытие модали.

 текст ссылки   X Cюда можно разместить любой контент

Помимо ссылки на открытие модального окна, можно поставить кнопку, картинку, еще что-то.

Установка простого модального окна в WordPress

Применение модального окна в WordPress практически ничем не отличается от вышеописанного. Можно добавить, что в него можно добавлять шорткод, например обратной связи плагина CF-7.

Если нужно разместить модаль не в публикации, а в файлах шаблона, то просто поставьте html код в нужное место шаблона.

Лучший способ отблагодарить автора

Как сделать отображение модального окна посередине видимой области экрана? [закрыт]

Закрыт. Этот вопрос необходимо уточнить или дополнить подробностями. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.

Закрыт 4 года назад .

Как сделать, чтобы вызванное модальное окно появлялось всегда в центре зоне видимости окна? С возможностью скролла этого окна.

Отслеживать
задан 22 сен 2019 в 3:01
67 3 3 бронзовых знака
про скролл не понял
22 сен 2019 в 5:56

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

А вот по олдскульному ) Если нужен не flex 😉

.wrap < width: 100%; height: 100%; position: fixed; left: 0; top: 0; right: 0; bottom: 0; >.modal

 Modal

Отслеживать
ответ дан 22 сен 2019 в 9:15
Ruslan Semenov Ruslan Semenov
3,651 1 1 золотой знак 9 9 серебряных знаков 23 23 бронзовых знака
Не совсем «олдскульно» из-за transform . Но как вариант.
22 сен 2019 в 10:00

Обернуть это модальное окно в div и использовать флекс.

.wrap < display: flex; width: 100%; height: 100%; position: fixed; left: 0; top: 0; right: 0; bottom: 0; justify-content: center; align-items: center; >.modal

 Modal

UPD

Вот ответ, где я собирал все известные мне способы, при помощи которых можно отцентрировать элемент по центру — ссылка

Отслеживать
ответ дан 22 сен 2019 в 3:59
23.6k 4 4 золотых знака 35 35 серебряных знаков 68 68 бронзовых знаков

css
jquery

Важное на Мете

Связанные

Пишем JavaScript

В начале, повесим на document событие DOMContentLoaded. Это событие сработает когда страница будет загружена.

document.addEventListener('DOMContentLoaded', function() >);

Затем запишем массив кнопок в переменную используя метод querySelector. Здесь же определим еще 2 переменные: элемент подложки и массив кнопок-крестиков.

document.addEventListener('DOMContentLoaded', function()  var modalButtons = document.querySelectorAll('.js-open-modal'), 
overlay = document.querySelector('#overlay-modal'), 
closeButtons = document.querySelectorAll('.js-modal-close');
>);

Заметьте, modalButtons и CloseButtons мы получаем через querySelectorAll, который возвращает массив, мы сделали это потому что нужно обрабатывать клики по всем кнопка, а вот overlay мы получаем через querySelector, он возвращает один элемент.

В html добавим кнопкам классы .js-open-modal. Мы специально будем использовать новый класс с приставкой js, чтобы не путать стили и интерактивность. Все кто будет работать с кодом увидит, что у класса есть приставка js, значит этот класс используется для интерактивности и его лучше не трогать.

После этого нужно повесить событие клика на каждую кнопку. Для этого мы переберем полученный массив кнопок и повесим обработчик на каждый элемент. Перебирать массив мы будем с помощью forEach:

/* Перебираем массив кнопок */
modalButtons.forEach(function(item)>);

В переменной item у нас будет храниться текущий элемент цикла. Повесим обработчик на него:

/* Перебираем массив кнопок */
modalButtons.forEach(function(item) /* Назначаем каждой кнопке обработчик клика */ 
item.addEventListener('click', function(event)  >);
>);

event или e — объект текущего события. В этом объекте хранятся различные методы и данные. При вызове любого события указание аргумента у функции будет ссылаться на этот объект. Зачем нам нужен этот объект? Об этом чуть ниже.

Что нам нужно сделать теперь?

Для начала нужно предусмотреть то, что кнопка, которая вызывает наше модальное окно, может быть ссылкой, кнопкой в форме или другим элементом, который стандартно выполняет какие-то интерактивные действия. Нам нужно отменить эти действия для нормальной работы нашего кода.

Для этого в объекте события есть метод, который предотвращает стандартное действие элемента.

event.preventDefault();

С предотвращением вопрос решили.

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

Получить значение атрибута текущей кнопки
Найти модальное окно с помощью этого значения

var modalId = this.getAttribute('data-modal'), 
modalElem = document.querySelector('.modal[data-modal="' + modalId + '"]');

Для того чтобы найти модальное окно, мы пишем определенный селектор, а там где нужно вставить значение, делаем разрыв строки и вставляем значение переменной, соединяя строки используя оператор сложения, в случае со строками, он выполняет их соединение(конкатенацию).

В итоге получается такой селектор — ‘.modal=[data-modal=”значение переменной”]’ , который и находит наше модальное окно.

Давайте добавим нашему окну и подложке класс active.

modalElem.classList.add('active');
overlay.classList.add('active');

Напишем стили для классов .active:

.modal.active,
.overlay.active opacity: 1; 
visibility: visible;
>

Весь javascript код который получился:

document.addEventListener('DOMContentLoaded', function()  var modalButtons = document.querySelectorAll('.js-open-modal'), 
overlay = document.querySelector('#overlay-modal'), 
closeButtons = document.querySelector('.js-modal-close'); 
 
 
modalButtons.forEach(function(item)  
item.addEventListener('click', function(e)  
e.preventDefault(); var modalId = this.getAttribute('data-modal'), 
modalElem = document.querySelector('.modal[data-modal="' + modalId + '"]'); 
 
modalElem.classList.add('active'); 
overlay.classList.add('active'); >); // end click 
>); // end foreach
>); // end ready

Кнопки должны открывать то модальное окно, к которому привязаны. Проверяем:

Осталось написать закрытие окон по клику на крестик. С перебором элементов и созданием события вы уже знакомы.

closeButtons.forEach(function(item)  item.addEventListener('click', function(e)  >);>); // end foreach

При клике на крестик нам нужно у этого же элемента найти родителя или деда с классом .modal и удалить у него класс .active.

Готовой функции для перебора родителей элемента нет. Есть метод который позволяет получить родителя, но это ненадежно, так как разметка может поменяться и наш код сломается.

Для таких задач я не буду писать велосипед а воспользуюсь готовой микро-библиотекой closest. Код библиотеки:

!function(e)),"function"!=typeof e.closest&&(e.closest=function(e)return null>)>(window.Element.prototype);

Его нужно подключить в отдельном файле или в этом же файле до нашего кода.

Библиотека создает функцию closest. Используя её мы можем искать элемент, который находится выше по дереву и класс которого совпадает с тем который мы ищем.

В нашем случае мы должны найти родителя с классом .modal и не важно является ли он прямым предком или между них есть еще какие-то элементы.

От нашего крестика мы идем вверх и проверяем родителя на класс .modal, не подошел — берем родителя его родителя и опять проверяем, так до самого конца, до window, пока не найдем интересующий нас элемент. В библиотеке jquery такая функция есть изначально, пишется она так же.

closeButtons.forEach(function(item) item.addEventListener('click', function(e) console.log(this.closest('.modal')); 
>);>); // end foreach

При клике на крестик, код выполнился и мы увидели в консоли родителя или деда нашего крестика, элемент с классом .modal. Теперь мы можем убрать у него активный класс, сразу же уберем его и у подложки.

closeButtons.forEach(function(item) item.addEventListener('click', function(e) var parentModal = this.closest('.modal'); parentModal.classList.remove('active'); 
overlay.classList.remove('active'); 
>);>); // end foreach

Теперь вы можете создавать много много модальных окон не изменяя свой js код.

Для многих операция jquery является громоздкой библиотекой. Вы можете использовать вместо этого микро-библиотеки. Сборник библиотек — http://microjs.com/.

Еще один полезный сайт который уже в названии говорит что jquery вам может быть и не нужен. http://youmightnotneedjquery.com/

Спасибо за прочтение статьи! Если материал был полезен для тебя — поставь лайк или напиши об этом в комментариях, это займет 1 минуту, это важно для меня. Спасибо!

Если у тебя есть замечания, пожелания, предложения — можешь так же написать их в комментариях. Я рад новым мнениям и критике.

Модальные окна на CSS

Пример:

HTML:

CSS:

Пример:

HTML:

CSS:

Вариант с использованием псевдокласса :target

Пример:

HTML:

CSS:

Смотрите также:

Модальное окно для контактов

QR-код для ссылки на страницу

Создание сообщения об использовании куки (cookie)

Добавить комментарий:

Комментарии:

Простое модальное окно на CSS без JS

Простое модальное окно на CSS

Установка простого модального окна в WordPress

Похожие по Тегам статьи

Разделы сайта

Как сделать отображение модального окна посередине видимой области экрана? [закрыт]

2 ответа 2

Связанные

Похожие

Пишем JavaScript

Похожие записи