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

Как сделать — Модальное окно

Узнать, как создать модальное окно с помощью CSS и JavaScript.

Создать модальное окно

Модаль — это диалоговое окно/всплывающее окно, которое отображается в верхней части текущей страницы:

Модальный заголовок

Модальный нижний колонтитул

Шаг 1) Добавить HTML:

Пример

class=»modal» is a container element for the modal and the div with class=»modal-content» is where you put your modal content (headings, paragraphs, images, etc).

The element with class=»close» should be used to close the modal.

Шаг 2) Добавить CSS:

Пример

/* Модальный (фон) */
.modal display: none; /* Скрыто по умолчанию */
position: fixed; /* Оставаться на месте */
z-index: 1; /* Сидеть на вершине */
left: 0;
top: 0;
width: 100%; /* Полная ширина */
height: 100%; /* Полная высота */
overflow: auto; /* Включите прокрутку, если это необходимо */
background-color: rgb(0,0,0); /* Цвет запасной вариант */
background-color: rgba(0,0,0,0.4); /* Черный с непрозрачностью */
>

/* Модальное содержание/коробка */
.modal-content background-color: #fefefe;
margin: 15% auto; /* 15% сверху и по центру */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Может быть больше или меньше, в зависимости от размера экрана */
>

/* Кнопка закрытия */
.close color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
>

.close:hover,
.close:focus color: black;
text-decoration: none;
cursor: pointer;
>

.modal class

The .modal class represents the window BEHIND the actual modal box. The height and width is set to 100%, which should create the illusion of a background window.

Добавить a black background color with opacity.

Set position to fixed; meaning it will move up and down the page when the user scrolls.

It is hidden by default, and should be shown with a click of a button (we’ll cover this later).

The .modal-content class

This is the actual modal box that gets focus. Do whatever you want with it. We have got you started with a border, some padding, and a background color. The margin: 15% auto is used to push the modal box down from the top (15%) and centering it (auto).

We also set the width to 400px — this could be more or less, depending on screen size. We will cover this later.

The .close class

The close button is styled with a large font-size, a specific color and floats to the right. We have also added some styles that will change the color of the close button when the user moves the mouse over it.

Шаг 3) Добавить JavaScript:

Пример

// Получить модальный
var modal = document.getElementById(«myModal»);

// Получить кнопку, которая открывает модальный
var btn = document.getElementById(«myBtn»);

// Получить элемент , который закрывает модальный
var span = document.getElementsByClassName(«close»)[0];

// Когда пользователь нажимает на кнопку, откройте модальный
btn.onclick = function() modal.style.display = «block»;
>

// Когда пользователь нажимает на (x), закройте модальное окно
span.onclick = function() modal.style.display = «none»;
>

// Когда пользователь щелкает в любом месте за пределами модального, закройте его
window.onclick = function(event) if (event.target == modal) modal.style.display = «none»;
>
>

Добавить верхний и нижний колонтитулы

Добавить класс для модального заголовка, модального тела и модального нижнего колонтитула:

Пример

Стиль модального заголовка, тела и нижнего колонтитула, а также добавить анимацию (слайд в модели):

Пример

/* Модальный заголовок */
.modal-header padding: 2px 16px;
background-color: #5cb85c;
color: white;
>

/* Модальное тело */
.modal-body

/* Модальный нижний колонтитул */
.modal-footer padding: 2px 16px;
background-color: #5cb85c;
color: white;
>

/* Модальное содержание */
.modal-content position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
animation-name: animatetop;
animation-duration: 0.4s
>

Нижний модальный («нижние листы»)

Пример того, как создать модальный режим полной ширины, который скользит снизу:

Пример

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

Модальное окно на чистом CSS и JS

Всем привет! Я в веб-разработке не так давно. Сейчас я пишу свой сайт, который будет выступать в качестве моего портфолио и, возможно, даже целого проекта. При добавлении модального окна для авторизации на свой сайт, я подумал, а что будет, если публиковать подобные модульные вещи, чтобы любой человек мог их скопировать и не думать о них, а использовать в разработке. То есть создать готовый модуль для встраивания. Мне, как разработчику было бы удобно использовать готовое решение, тем более написанное мною, да и делиться опытом — дело приятное 🙂

NB

сам сайт скрыт для сохранения интеллектуальной собственности 🙂

А теперь пошаговое создание:

Здесь представлена несложная разметка для модального окна.

Перед разъяснением элементов и их стилей, мы укажем скрытие ползунка прокрутки для body, которое нам будет мешать:

/* убираем нижний ползунок прокрутки */ body

Давайте поясню, что есть что:

• modalBackground — это фон, расположенный за модальным окном. Через него мы будем видеть наш сайт < background: rgba(0, 0, 0, 0.8); >, в то время как основной фокус будет на модальном окне. Для корректного расположения, чтобы наш фон покрывал весь сайт — мы делаем его с положением < position: fixed >и размерами на весь экран < width: 100%; height : 100%; >. А для наложения поверх других окон или элементов сайта — < z-index: 1 >. Стоит отметить, что изначально мы не можем видеть наше окно < display: none >. Для отображения возможности нажатия на фон — делаем указатель через

/* фон нашего модального окна */ .modalBackground < display: none; background: rgba(0, 0, 0, 0.8); position: fixed; width: 100%; height: 100%; cursor: pointer; /* указываем z-индекс для корректного наслаивания */ z-index: 1; >

• modalActive — непосредственно наше модальное окно. Его размеры < width: 350px; height : 495px; >я подбирал исходя из удобства верстки для маленьких экранов, так что размеры можно указать свои. Мы позиционируем наше модальное окно по центру < position: absolute; top: calc(50% - 250px); left: calc(50% - 175px); >. Делаем рамки закругления в 10 пикселей < border-radius: 10px >. Курсор для удобства делаем стандартным < cursor: default >. Свойства background-color и padding в данном случае ни на что не влияют, они используются для фона нашего окошечка внутри и для внутренних отступов нашего окошечка соответственно. Поэтому их можно ставить на свой вкус и цвет 🙂

/* позиционирование самого модального окна */ .modalActive

• modalClose — это наш крестик. Я использовал два варианта выхода из модального окна, кому как удобнее — через нажатие на фон, либо через нажатие на крестик (этот вариант предпочтительнее для мобильных устройств из-за маленького экрана, по сравнению с монитором ноутбука/компьютера/планшета). Для крестика соответственно используется тег modalCross с указанием в img пути к картинке-крестика. Свойство font-family используется для выбора семейства шрифта, здесь оно не играет роли (на ваш вкус и цвет).

/* кнопочка закрытия модального окна */ .modalClose < font-family: var(--font-regular); position: absolute; right: 5px; top: 5px; width: 30px; height: 30px; cursor: pointer; >/* сама картинка кнопочки закрытия */ .modalClose img

• modalWindow — внутри него располагается содержимое нашего окна, для удобной верстки внутреннего содержимого устанавливаем относительное позиционирование относительно нашего модального окна < position: relative >. Какое оно будет — зависит только от вас 🙂

/* делаем позиционирование внутренних элементов относительно модального окна */ .modalWindow

Теперь приступим к части оживления нашего окна с помощью жабаскрипта JS !

Прежде всего нам надо получить все элементы, с которыми нам предстоит работать:

// устанавливаем триггер для модального окна (название можно изменить) const modalTrigger = document.getElementsByClassName("trigger")[0]; // получаем ширину отображенного содержимого и толщину ползунка прокрутки const windowInnerWidth = document.documentElement.clientWidth; const scrollbarWidth = parseInt(window.innerWidth) - parseInt(document.documentElement.clientWidth); // привязываем необходимые элементы const bodyElementHTML = document.getElementsByTagName("body")[0]; const modalBackground = document.getElementsByClassName("modalBackground")[0]; const modalClose = document.getElementsByClassName("modalClose")[0]; const modalActive = document.getElementsByClassName("modalActive")[0];

Стоит отметить, что при использовании метода getElementsByClassName мы будем получать массив всех элементов. Поэтому для корректного обращения к конкретному элементу — мы указываем индекс получаемого элемента. А так как наши массивы состоят из одного элемента — индекс во всех случаях равен [0].

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

Если наш сайт длинный и у нас появляется ползунок прокрутки — мы получаем его длину и записываем в scrollbarWidth. Давайте тут поподробнее. Мы изначально получаем ширину видимой части сайта через свойство clientWidth. Ширина ползунка прокрутки — разность между шириной окна внутри и шириной отображаемого содержимого (то, что под ползунком — не является отображаемым содержимым). Для корректности мы преобразовываем полученные значения через функции parseInt.

Далее мы привязываем необходимые элементы к переменным в соответствии с названием их классов, для тега body мы используем метод getElementsByTagName с указанием индекса получаемого элемента, то есть [0]. Смысл такой же, как и при getElementsByClassName. Я заметил простую вещь — если читаешь название методов, то понимаешь что они тебе дают :). В нашем случаем мы получаем множество элементов (окончание s в слове Elements), поэтому мы и работаем с массивом. А в методе getElementById мы получаем один элемент (о чем свидетельствует отсутствие окончания s в слове Element).

После инициализации рабочих переменных — мы корректируем положение body при появлении ползунка прокрутки, то есть наш ползунок будет накладываться поверх нашего сайта, а не сдвигать его, как это обычно бывает (можете проверить сами):

// функция для корректировки положения body при появлении ползунка прокрутки function bodyMargin() < bodyElementHTML.style.marginRight = "-" + scrollbarWidth + "px"; >// при длинной странице - корректируем сразу bodyMargin();

Механизм корректировки прост: в случае появления ползунка прокрутки — мы делаем отступ body через свойство margin-right на отрицательную величину ширины ползунка прокрутки. При первой загрузки страницы мы вызываем эту функцию, чтобы наше содержимое сразу же позиционировалось корректно, несмотря на наличие ползунка прокрутки. Вообще, позиционирование с учетом ползунка прокрутки — дело каждого, мне не хотелось бы, чтобы мой сайт скакал влево вправо 🙂

Создадим обработчик события нажатия на наш триггер:

// событие нажатия на триггер открытия модального окна modalTrigger.addEventListener("click", function () < // делаем модальное окно видимым modalBackground.style.display = "block"; // если размер экрана больше 1366 пикселей (т.е. на мониторе может появиться ползунок) if (windowInnerWidth >= 1366) < bodyMargin(); >// позиционируем наше окно по середине, где 175 - половина ширины модального окна modalActive.style.left = "calc(50% - " + (175 - scrollbarWidth / 2) + "px)"; >);

И в завершение создадим обработчик закрытия нашего окна при нажатии на крестик или на область за модальным окном:

// нажатие на крестик закрытия модального окна modalClose.addEventListener("click", function () < modalBackground.style.display = "none"; if (windowInnerWidth >= 1366) < bodyMargin(); >>); // закрытие модального окна на зону вне окна, т.е. на фон modalBackground.addEventListener("click", function (event) < if (event.target === modalBackground) < modalBackground.style.display = "none"; if (windowInnerWidth >= 1366) < bodyMargin(); >> >);

Вот и всё модальное окно. Если у Вас есть какие-нибудь замечания, похвала, критика, советы, любой фидбек — буду рад прочитать и внести корректировки! Всех обнял-приподнял 🙂

Как создать простое модальное окно на CSS

Модальные (всплывающие) окна – это очень популярный элемент интерфейса современных сайтов. Оно может использоваться для вывода различного контента веб-страниц такого, например, как формы (обратной связи, регистрации, авторизации), блоки рекламной информации, изображения, уведомления и др.

В большинстве случаев модальное окно создают на JavaScript. Но его можно создать не только с помощью JavaScript, но и посредством только HTML5 и CSS3.

Демо модального окна

Демонстрацию всплывающего окна, работающего только на HTML5 и CSS3, вы можете посмотреть здесь:

HTML и CSS код модального окна

HTML разметка модального окна:

 
 
 
 
Название
 × 
 
Содержимое модального окна.
 
 
 
 

Ссылка, с помощью которой осуществляется открытие модального окна:

CSS модального окна:

/* стилизация содержимого страницы */ body { font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; color: #292b2c; background-color: #fff; } /* свойства модального окна по умолчанию */ .modal { position: fixed; /* фиксированное положение */ top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.5); /* цвет фона */ z-index: 1050; opacity: 0; /* по умолчанию модальное окно прозрачно */ -webkit-transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; /* анимация перехода */ pointer-events: none; /* элемент невидим для событий мыши */ margin: 0; padding: 0; } /* при отображении модального окно */ .modal:target { opacity: 1; /* делаем окно видимым */ pointer-events: auto; /* элемент видим для событий мыши */ overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */ } /* ширина модального окна и его отступы от экрана */ .modal-dialog { position: relative; width: auto; margin: 10px; } @media (min-width: 576px) { .modal-dialog { max-width: 500px; margin: 30px auto; /* для отображения модального окна по центру */ } } /* свойства для блока, содержащего контент модального окна */ .modal-content { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid rgba(0,0,0,.2); border-radius: .3rem; outline: 0; } @media (min-width: 768px) { .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5); box-shadow: 0 5px 15px rgba(0,0,0,.5); } } /* свойства для заголовка модального окна */ .modal-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding: 15px; border-bottom: 1px solid #eceeef; } .modal-title { margin-top: 0; margin-bottom: 0; line-height: 1.5; font-size: 1.25rem; font-weight: 500; } /* свойства для кнопки "Закрыть" */ .close { float: right; font-family: sans-serif; font-size: 24px; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .5; text-decoration: none; } /* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */ .close:focus, .close:hover { color: #000; text-decoration: none; cursor: pointer; opacity: .75; } /* свойства для блока, содержащего основное содержимое окна */ .modal-body { position: relative; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 15px; overflow: auto; }

Если вам необходимо убрать скролл страницы после отображения модального окна, то к элементу body нужно добавить CSS-свойство overflow со значением hidden . А после скрытия модального окна данное свойство убрать у элемента body . Данное действие можно осуществить только с помощью JavaScript:

JavaScript

document.addEventListener("DOMContentLoaded", function(){ var scrollbar = document.body.clientWidth - window.innerWidth + 'px'; console.log(scrollbar); document.querySelector('[href="#openModal"]').addEventListener('click',function(){ document.body.style.overflow = 'hidden'; document.querySelector('#openModal').style.marginLeft = scrollbar; }); document.querySelector('[href="#close"]').addEventListener('click',function(){ document.body.style.overflow = 'visible'; document.querySelector('#openModal').style.marginLeft = '0px'; }); });

Делаем модальные окна для сайта. Заботимся об удобстве и доступности

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

Вёрстка таких окон сначала кажется простой задачей. Модальные окна можно сделать даже без помощи JS только лишь с помощью CSS, но на практике они оказываются неудобными, и из-за маленьких недочетов модальные окна раздражают посетителей сайта.

В итоге было задумано сделать собственное простое решение.

Вообще говоря, есть несколько готовых скриптов, JavaScript библиотек, реализующих функционал модальных окон, например:

• Arctic Modal,
• jquery-modal,
• iziModal,
• Micromodal.js,
• tingle.js,
• Bootstrap Modal (из библиотеки Bootstrap) и др.

(в статье не рассматриваем решения на базе Frontend-фреймворков)

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

Что мы ждём от модальных окон? Отвечая на этот вопрос, я основывался на докладе «Знакомьтесь, модальное окно» Анны Селезнёвой, а так-же на относительно старой статье NikoX «arcticModal — jQuery-плагин для модальных окон».

Итак, чтобы нам хотелось видеть?

• Окна должны открываться как можно быстрее, без тормозов браузера, с возможностью анимировать открытие и закрытие.
• Под окном должен быть оверлей. Клик/тап по оверлею должен закрывать окно.
• Страница под окном не должна прокручиваться.
• Окон может быть несколько. Открытие одного определенного окна должно осуществляться кликом на любой элемент страницы с data-атрибутом, который мы выберем.
• Окно может быть длинным – прокручиваемым.
• Желательно поработать над доступностью, а также с переносом фокуса внутрь окна и обратно.
• Должно работать на IE11+

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

Начнём с разметки.

1. Разметка HTML и CSS

1.1. Каркас модальных окон

Как открыть окно быстро? Самое простое решение: разместить всю разметку модального окна сразу в HTML странице. Затем скрывать/показывать это окно при помощи переключения классов CSS.

Набросаем такую разметку HTML (я назвал этот скрипт «hystmodal»):

 
 
Close Текст модального окошка. 
 

Итак, разместим перед закрывающим тегом наш блок с окном ( .hystmodal ). Он будет фоном. Удобно указать уникальный атрибут id (например #myModal ) каждому окну (ведь их у нас может быть несколько).

Сделаем так, чтобы .hystmodal растягивался на всё окно браузера и закрывал собой содержимое страницы. Чтобы этого добиться, установим фиксированное позиционирование в CSS и приравняем свойства top, bottom, left и right к нулю.

.hystmodal < position: fixed; top: 0; bottom: 0; right: 0; left: 0; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-flow: column nowrap; justify-content: center; /* см. ниже */ align-items: center; z-index: 99; /* Чтобы окно не прилипало к границе браузера установим отступы */ padding:30px 0; >

В этом коде сделаны ещё две вещи:

1. Так как мы хотим центрировать окно внутри страницы, превращаем .hystmodal в flex-контейнер с выравниваем его потомков по центру по вертикали и горизонтали.
2. Окно может быть больше высоты экрана браузера, поэтому мы устанавливаем overflow-y: auto , чтобы при переполнении возникала полоса прокрутки. Также, для сенсорных экранов (в основном для Safari) нам стоит установить свойство -webkit-overflow-scrolling: touch , чтобы сенсорная прокрутка работала именно на этом блоке а не на странице.

Теперь установим стили для самого окна.

.hystmodal__window < background: #fff; /* Установим по умолчанию ширину 600px но она будет не больше ширины браузера */ width: 600px; max-width: 100%; /* Заготовка для будущих анимаций */ transition: transform 0.15s ease 0s, opacity 0.15s ease 0s; transform: scale(1); >

Кажется возникли сложности.

Проблема №1. Если высота окна больше высоты окна браузера, то контент окна будет обрезан сверху.

Это возникает из-за свойства justify-content: center . Оно позволяет нам удобно выровнять потомков по основной оси (по вертикали), но если потомок становится больше родителя то часть его становится недоступной даже при прокручиваемом контейнере. Подробнее можно посмотреть на stackoverflow. Решение – установить justify-content: flex-start , а потомку установить margin:auto . Это выровняет его по центру.

Проблема №2. В ie-11 если высота окна больше высоты окна браузера, то фон окна обрезается.

Решение: мы можем установить flex-shrink:0 потомку – тогда обрезки не происходит.

Проблема №3. В браузерах кроме Chrome нет отступа от нижней границы окна (т.е. padding-bottom не сработал).

Сложно сказать баг это браузеров или наоборот соответствует спецификации, но решения два:

• установить псевдоэлемент ::after после потомка и дать ему высоту вместо padding
• обернуть элемент в дополнительный блок и дать отступы уже ему.

Воспользуемся вторым методом. Добавим обертку .hystmodal__wrap . Так мы заодно обойдём и проблему №1, а вместо padding у родителя установим margin-top и margin-top у самого .hystmodal__window .

Наш итоговый html:

 
 
 
Close 
Заголовок модального окна
 
Текст модального окна .





 
Ещё текст модального окна .
 
 
 

В код также добавлены некоторые aria и role атрибуты для обеспечения доступности.

Обновленный код CSS для обертки и окна.

.hystmodal__wrap < flex-shrink: 0; flex-grow: 0; width: 100%; min-height: 100%; margin: auto; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; >.hystmodal__window

1.2 Скрываем окно

Сейчас наше окно всегда видно. Когда говорят о скрытии элементов, первое что приходит на ум это переключать свойство display со значения none до нашего значения flex.

Но этот подход нас не устроит, ведь свойство display не анимируется. Все переходы дочерних элементов, указанные в свойстве transition, работать не будут.

Нам поможет другое свойство visibility:hidden . Оно скроет окно визуально, хотя и зарезервирует под него место. А так как все будущие окна на странице имеют фиксированное
позиционирование – они будут полностью скрыты и не повлияют на остальную страницу. Кроме того, на элементы с visibility:hidden нельзя установить фокус с клавиатуры, а от скрин-ридеров мы уже скрыли окна с помощью атрибута aria-hidden=»true» .

Добавим также классы для открытого окна:

.hystmodal--active < visibility: visible; >.hystmodal--active .hystmodal__window

1.3 Оформление подложки

В лучшем случае, нам нужен отдельный html-элемент в качестве оверлея. Можно использовать и имеющийся элемент модального окна .hystmodal в качестве оверлея, но тогда анимация на этом элементе (например переход opacity) будет затрагивать и внутренние элементы. В итоге, не получится анимировать разные свойства для окна и оверлея отдельно.

Просто разместим элемент .hystmodal__shadow прямо перед закрывающим . В будущем, сделаем так, чтобы этот элемент создавался автоматически из js при инициализации библиотеки.

.hystmodal__shadow < position: fixed; border:none; display: block; width: 100%; top: 0; bottom: 0; right: 0; left: 0; overflow: hidden; pointer-events: none; z-index: 98; opacity: 0; transition: opacity 0.15s ease; background-color: black; >/* активная подложка */ .hystmodal__shadow--show

1.4 Отключение прокрутки страницы

Когда модальное окна открывается, мы хотим, чтобы страница под ним не прокручивалась.
Самый простой способ этого добиться — повесить overflow:hidden для body или html, когда окно открывается. Однако с этим есть проблема:

Проблема №4. В браузере Safari на iOS страница будет прокручиваться, даже если на тег html или body повешен overflow:hidden .
Решается двумя способами, либо блокированием событий прокрутки (touchmove, touchend или touchsart) из js вида:

targetElement.ontouchend = (e) => < e.preventDefault(); >;

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

ps: можно конечно применить библиотеку scroll-lock, в которую заложено это решение, но в статье было решено воспользоваться другим вариантом.

Другое решение – основано частично на CSS. Пусть когда окно открывается, на элемент будет добавляться класс .hystmodal__opened :

.hystmodal__opened

Благодаря position:fixed , окно не будет прокручиваться даже в safari, однако здесь тоже не всё гладко:

Проблема №5. При открытии/закрытии окна страница прокручивается в начало.
Действительно, это происходит из-за изменения свойства position, текущая прокрутка окна сбрасывается.

Для решения, нам нужно написать следующий JS (упрощенно):

При открытии:

// Находим тег html и сохраняем его let html = document.documentElement; //сохраним текущую прокрутку: let scrollPosition = window.pageYOffset; //установим свойство top у html равное прокрутке html.style.top = -scrollPosition + "px"; html.classList.add("hystmodal__opened");

При закрытии:

html.classList.remove("hystmodal__opened"); //прокручиваем окно туда где оно было window.scrollTo(0, scrollPosition); html.style.top = "";

Отлично, приступим к JavaScript коду.

2. Код JavaScript

2.2 Каркас библиотеки

Нам нужна совместимость со старыми браузерами включая IE11 поэтому нам нужно выбрать из 2 вариантов кодинга:

• Разрабатывать на старом стандарте ES5, и использовать только те фичи, которые поддерживают все браузеры.
• Применить современный синтаксис ES6, но подключить транспайлер Babel, который автоматически преобразует код для всех браузеров и встроит необходимые полифилы.
  Было принято решение использовать второй вариант, с прицелом на будущее.
  Приступим.

Основа нашей библиотеки единственный класс HystModal . Ниже я приведу скелет кода с комментариями, а потом добавим остальной функционал.

class HystModal < /** * При создании экземпляра класса, мы передаём в него * js-объект с настройками. Он становится доступен * в конструкторе класса в виде переменной props */ constructor(props)< /** * Для удобства некоторые свойства можно не передавать * Мы должны заполнить их начальными значениями * Это можно сделать применив метод Object.assign */ let defaultConfig = < linkAttributeName: 'data-hystmodal', // . здесь остальные свойства >this.config = Object.assign(defaultConfig, props); // сразу вызываем метод инициализации this.init(); > /** * В свойство _shadow будет заложен div с визуальной * подложкой. Оно сделано статическим, т.к. при создании * нескольких экземпляров класса, эта подложка нужна только * одна */ static _shadow = false; init() < /** * Создаём триггеры состояния, полезные переменные и.т.д. */ this.isOpened = false; // открыто ли окно this.openedWindow = false; //ссылка на открытый .hystmodal this._modalBlock = false; //ссылка на открытый .hystmodal__window this.starter = false, //ссылка на элемент "открыватель" текущего окна // (он нужен для возвращения фокуса на него) this._nextWindows = false; //ссылка на .hystmodal который нужно открыть this._scrollPosition = 0; //текущая прокрутка (см. выше) /** * . остальное */ // Создаём только одну подложку и вставляем её в конец body if(!HystModal._shadow)< HystModal._shadow = document.createElement('div'); HystModal._shadow.classList.add('hystmodal__shadow'); document.body.appendChild(HystModal._shadow); >//Запускаем метод для обработки событий см. ниже. this.eventsFeeler(); > eventsFeeler() < /** * Нужно обработать открытие окон по клику на элементы с data-атрибутом * который мы установили в конфигурации - this.config.linkAttributeName * * Здесь мы используем делегирование события клика, чтобы обойтись одним * лишь обработчиком события на элементе html * */ document.addEventListener("click", function (e) < /** * Определяем попал ли клик на элемент, * который открывает окно */ const clickedlink = e.target.closest("[" + this.config.linkAttributeName + "]"); /** Если действительно клик был на * элементе открытия окна, находим * подходящее окно, заполняем свойства * _nextWindows и _starter и вызываем * метод open (см. ниже) */ if (clickedlink) < e.preventDefault(); this.starter = clickedlink; let targetSelector = this.starter.getAttribute(this.config.linkAttributeName); this._nextWindows = document.querySelector(targetSelector); this.open(); return; >/** Если событие вызвано на элементе * с data-атрибутом data-hystclose, * значит вызовем метод закрытия окна */ if (e.target.closest('[data-hystclose]')) < this.close(); return; >>.bind(this)); /** По стандарту, в обработчике события в this * помещается селектор на котором события обрабатываются. * Поэтому нам нужно вручную установить this на наш * экземпляр класса, который мы пишем с помощью .bind(). */ //обработаем клавишу escape и tab window.addEventListener("keydown", function (e) < //закрытие окна по escape if (e.which == 27 && this.isOpened) < e.preventDefault(); this.close(); return; >/** Вызовем метод для управления фокусом по Tab * и всю ответственность переложим на него * (создадим его позже) */ if (e.which == 9 && this.isOpened) < this.focusCatcher(e); return; >>.bind(this)); > open(selector) < this.openedWindow = this._nextWindows; this._modalBlock = this.openedWindow.querySelector('.hystmodal__window'); /** Вызываем метод управления скроллом * он будет блокировать/разблокировать * страницу в зависимости от свойства this.isOpened */ this._bodyScrollControl(); HystModal._shadow.classList.add("hystmodal__shadow--show"); this.openedWindow.classList.add("hystmodal--active"); this.openedWindow.setAttribute('aria-hidden', 'false'); this.focusContol(); //вызываем метод перевода фокуса (см. ниже) this.isOpened = true; >close() < /** * Метод закрытия текущего окна. Код упрощён * подробнее в статье далее. */ if (!this.isOpened) < return; >this.openedWindow.classList.remove("hystmodal--active"); HystModal._shadow.classList.remove("hystmodal__shadow--show"); this.openedWindow.setAttribute('aria-hidden', 'true'); //возвращаем фокус на элемент которым открылось окно this.focusContol(); //возвращаем скролл this._bodyScrollControl(); this.isOpened = false; > _bodyScrollControl() < let html = document.documentElement; if (this.isOpened === true) < //разблокировка страницы html.classList.remove("hystmodal__opened"); html.style.marginRight = ""; window.scrollTo(0, this._scrollPosition); html.style.top = ""; return; >//блокировка страницы this._scrollPosition = window.pageYOffset; html.style.top = -this._scrollPosition + "px"; html.classList.add("hystmodal__opened"); > >

Итак, мы описали класс HystModal . Чтобы всё работало, нужно всего лишь подключить наш скрипт и создать экземпляр класса:

const myModal = new HystModal(< linkAttributeName: 'data-hystmodal', >);

Проблема №6: если в браузере есть фиксированный скроллбар (который влияет на ширину страницы), то при открытии/закрытии окна происходит сдвиг контента, когда полоса прокрутки то появляется то пропадает.

Действительно – скроллбар пропадает и контент страницы перераспределяется. Чтобы решить эту проблему, можно добавить отступ справа к тегу html, равный ширине скроллбара когда он пропадает.

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

Дополним метод _bodyScrollControl()

//при открытии окна let marginSize = window.innerWidth - html.clientWidth; //ширина скроллбара равна разнице ширины окна и ширины документа (селектора html) if (marginSize) < html.style.marginRight = marginSize + "px"; >//при закрытии окна html.style.marginRight = "";

Почему код метода close() упрощён? Дело в том, что просто убирая классы CSS у элементов, мы не можем анимировать закрытие окна.

Проблема №7. При закрытии окна, свойство visibility:hidden применяется сразу и не даёт возможности анимировать закрытие окна.

Причина этого известна: свойство visibility:hidden не анимируется. Конечно, можно обойтись без анимации, но, если она нужна, сделаем следующее.

• Создадим дополнительный CSS-класс .hystmodal—moved почти такой-же как и .hystmodal—active

.hystmodal--moved

• Затем при закрытии сначала добавим этот класс к окну и повесим обработчик события «transitionend» на модальном окне. Затем удалим класс `.hystmodal—active , таким образом вызывая css-переход. Как только переход завершится, сработает обработчик события «transitionend», в котором сделаем всё остальное и удалим сам обработчик события.

Ниже: новая версия методов закрытия окна:

close() < if (!this.isOpened) < return; >this.openedWindow.classList.add("hystmodal--moved"); this.openedWindow.addEventListener("transitionend", this._closeAfterTransition); this.openedWindow.classList.remove("hystmodal--active"); > _closeAfterTransition()

Вы заметили, что мы создали ещё один метод _closeAfterTransition() и перенесли основную логику закрытия туда. Это нужно, чтобы удалить обработчик события transitionend после закрытия окна, ведь в метод removeEventListener необходимо передать именно ту функцию, которую мы привязывали.

Кроме того, если анимация не будет нужна, можно просто вызвать this._closeAfterTransition() не вешая его на событие.

Как мы помним, внутри addEventListener, this будет указывать на селектор где происходит событие, а не на наш экземпляр класса, поэтому в конструкторе нужно добавить ещё одну строчку для жёсткой привязки метода к this.

//внутри конструктора this._closeAfterTransition = this._closeAfterTransition.bind(this)

2.2 Закрытие окна по клику на оверлей

Нам нужно обработать ещё одно событие – закрытие окна по клику на элемент подложки .hystmodal__wrap . Мы можем повесить обработчик клика на документ для делегирования события как при открытии и проверить что событие произошло на .hystmodal__wrap примерно так:

document.addEventListener("click", function (e) < const wrap = e.target.classList.contains('hystmodal__wrap'); if(!wrap) return; e.preventDefault(); this.close(); >.bind(this));

Это будет работать, но есть один малозаметный недостаток.

Проблема №8. Если кнопку мыши нажать внутри окна, а отпустить за его пределами (над подложкой), окно закрывается.

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

Окно закрывается потому что по спецификации, если нажатие и отпускание мыши были на разных элементах, то событие click сработает на самом ближайшем общем для них элементе, а у нас это как раз .hystmodal__wrap .

Мы могли бы решить это изменением html, добавляя ещё один div сразу после .hystmodal__window и размещая его визуально под окном. Но нам бы не хотелось добавлять лишний пустой div ещё сильнее усложняя разметку.

Мы можем разбить наш addEventListener на два отдельных обработчика: для событий mousedown и mouseup и будем проверять чтобы оба события происходили именно на .hystmodal__wrap . Добавим новые обработчики событий в наш метод eventsFeeler()

document.addEventListener('mousedown', function (e) < /** * Проверяем было ли нажатие над .hystmodal__wrap, * и отмечаем это в свойстве this._overlayChecker */ if (!e.target.classList.contains('hystmodal__wrap')) return; this._overlayChecker = true; >.bind(this)); document.addEventListener('mouseup', function (e) < /** * Проверяем было ли отпускание мыши над .hystmodal__wrap, * и если нажатие тоже было на нём, то закрываем окно * и обнуляем this._overlayChecker в любом случае */ if (this._overlayChecker && e.target.classList.contains('hystmodal__wrap')) < e.preventDefault(); !this._overlayChecker; this.close(); return; >this._overlayChecker = false; >.bind(this));

2.3 Управление фокусом

У нас заготовлено два метода для управления фокусом: focusContol() для переноса фокуса внутрь окна и обратно при его закрытии, а также focusCatcher(event) для блокирования ухода фокуса из окна.

Решения для фокуса были реализованы аналогично js-библиотеке «Micromodal» (Indrashish Ghosh). А именно:

1. В служебный массив сохраним все css селекторы на которых может быть установлен фокус (свойство помещаем в init()):

//внутри метода init или конструктора this._focusElements = [ 'a[href]', 'area[href]', 'input:not([disabled]):not([type="hidden"]):not([aria-hidden])', 'select:not([disabled]):not([aria-hidden])', 'textarea:not([disabled]):not([aria-hidden])', 'button:not([disabled]):not([aria-hidden])', 'iframe', 'object', 'embed', '[contenteditable]', '[tabindex]:not([tabindex^="-"])' ];

2. В методе focusContol() находим первый такой селектор в окне и устанавливаем на него фокус, если окно открывается. Если же окно закрывается – то переводим фокус на this.starter :

focusContol() < /** Метод переносит фокус с элемента открывающего окно * в само окно, и обратно, когда окно закрывается * см. далее в тексте. */ const nodes = this.openedWindow.querySelectorAll(this._focusElements); if (this.isOpened && this.starter) < this.starter.focus(); >else < if (nodes.length) nodes[0].focus(); >>

3. В методе focusCatcher() находим в окне и превращаем в массив коллекцию всех элементов на которых может быть фокус. И проверяем, если фокус должен был выйти на пределы окна, то вместо этого устанавливаем фокус снова на первый или последний элемент (ведь фокус можно переключать как по Tab так и по Shift+Tab в обратную сторону).

Результирующий код метода focusCatcher:

focusCatcher(e) < /** Метод не позволяет фокусу перейти вне окна при нажатии TAB * элементы в окне фокусируются по кругу. */ // Находим все элементы на которые можно сфокусироваться const nodes = this.openedWindow.querySelectorAll(this._focusElements); //преобразуем в массив const nodesArray = Array.prototype.slice.call(nodes); //если фокуса нет в окне, то вставляем фокус на первый элемент if (!this.openedWindow.contains(document.activeElement)) < nodesArray[0].focus(); e.preventDefault(); >else < const focusedItemIndex = nodesArray.indexOf(document.activeElement) if (e.shiftKey && focusedItemIndex === 0) < //перенос фокуса на последний элемент nodesArray[nodesArray.length - 1].focus(); e.preventDefault(); >if (!e.shiftKey && focusedItemIndex === nodesArray.length - 1) < //перерос фокуса на первый элемент nodesArray[0].focus(); e.preventDefault(); >> >

По сути мы реализовали все необходимое для успешного создания модальных окон, осталось ещё несколько дел:

Проблема №9. В IE11 не работают методы Element.closest() и Object.assign() .

Для поддержки Element.closest, воспользуемся полифилами для closest и matches от MDN.

Можно их вставить просто так, но так как у нас проект всё равно собирается webpack, то удобно воспользоваться пакетом element-closest-polyfill который просто вставляет этот код.

Для поддержки Object.assign , можно воспользоваться уже babel-плагином @babel/plugin-transform-object-assign

3. Заключение и ссылки

Повторяя начало статьи, всё изложенное выше, я оформил в маленькую библиотеку hystModal под MIT-лицензией. Вышло 3 кБ кода при загрузке с gzip. Ещё написал для неё подробную документацию на русском и английском языке.

Что вошло ещё в библиотеку hystModal, чего не было в статье:

• Настройки (вкл/выкл управление фокусом, варианты закрытия, ожидание анимации закрытия)
• Коллбеки (функции вызывающиеся перед открытием окна и после его закрытия (в них передаётся объект модального окна))
• Добавлен запрет на какие-либо действия пока анимация закрытия окна не завершится, а также ожидание анимации закрытия текущего окна перед открытием нового (если окно открывается из другого окна).
• Оформление кнопки-крестика закрытия в CSS
• Минификация CSS и JS плагинами Webpack.

Если вам будет интересна эта библиотека, буду рад звёздочке в GitHub, или напишите в Issues о найденных багах. (Особенно большие проблемы, наверное, в грамматике английской версии документации, так как мои знания языка пока на начальном уровне. Связаться со мной также можно в Instagram