От автора: давайте поговорим о всплывающих окнах. Или модалах, оверлеях или как вам нравится их называть (не забудьте, лайтбокс). Несмотря на то, что многим пользователям это не нравится, эти элементы остаются популярными в Интернете. Но их технические реализации могут быть дико непоследовательными. Хотите больше не изобретать велосипед? Этот пост поможет вам решить задачу, как отобразить контент поверх другого контента.
Проблема
Реализация решений для всплывающих окон может быть непростой. То, что на первый взгляд кажется тривиальным, может оказаться более сложным в условиях нехватки времени. Возможно, вам придется учитывать дизайн модалов. И анимацию. Как насчет индивидуального поведения при представлении форм? Что произойдет, если одновременно будет выведено несколько модалов?
Вы можете найти решение с помощью плагинов. Но есть так много вариантов и вопросов, которые следует учитывать:
API
Доступность
Зависимости. Возможно, вам не нужны jQuery, React или подобное.
Поддержка. Кто его поддерживает? Как скоро решаются вопросы?
Расширяемость. Насколько легко настроить и добавить новые функции?
Конечно, вы можете вместо этого создать свой собственный плагин. Но насколько это гибкое решение? Можете ли вы повторно использовать его как есть в других местах? Как насчет других проектов?
Решение
Введите элемент HTML dialog! Представленный в HTML 5.2 (2018), dialog является оригинальным элементом браузера для создания всплывающих окон и модалов.
<dialog open> <h1>Hello</h1> </dialog>
Элемент dialog предоставляет:
Элемент, который легко вывести и скрыть, включая логический атрибут самого элемента open.
Две версии: стандартная popover или модальная.
Псевдо-элемент ::backdrop для модальных типов.
Встроенный фокус: см. этапы выделения фокусом элемента dialog.
Поддержка ARIA (диалог подразумевается по умолчанию). Также принимает роль alertdialog.
Отложенный стек для нескольких dialog.
Интерфейс DOM с атрибутом open и методами show , showModal и close.
И это лишь некоторые моменты! Отображать контент поверх другого контента никогда не было проще.
Стандартное использование
<dialog id="dialog"> <h1>Hello</h1>
</dialog> <script> var dialog = document.getElementById('dialog'); dialog.show();
</script>Модальное использование
Модальная версия активируется с помощью метода, dialog.showModal(). Она отличается от стандартного использования следующим:
Гарантируется, чтобы окно размещалось поверх любых других элементов, независимо от их z-индекса.
Для стилизации предоставляется dialog::backdrop.
Закрытие с помощью клавиши Esc.
<dialog id="dialog"> <h1>Hello</h1>
</dialog> <script> var dialog = document.getElementById('dialog'); dialog.showModal(); // "showModal" вместо "show"
</script>::backdrop
Укажите dialog::backdrop для назначения стилей фона модального окна. Действительно удобно для полупрозрачного фонового наложения.
dialog::backdrop { background-color: rgba(0, 0, 0, 0.8);
}Диалоговые формы
Новый атрибут форм, method=»dialog», может использоваться в элементах dialog. Указав атрибут, мы можем предоставить содержимое атрибута value кнопки отправки для самого элемента.
<dialog id="dialog"> <form method="dialog"> <p>Would you like to continue?</p> <button type="submit" value="no">No</button> <button type="submit" value="yes">Yes</button> </form>
</dialog> <script> var dialog = document.getElementById('dialog'); dialog.showModal(); dialog.addEventListener('close', function (event) { if (dialog.returnValue === 'yes') { /* ... */ } });
</script>Могу ли я использовать?
На момент написания этой статьи поддержка браузерами для элемента dialog составляет около 70%. Но есть надежда, что этот процент увеличится. Реализация в Firefox уже почти готова. Статус в Edge для элемента — находится на рассмотрении: «… вероятно, в будущем релизе». Вы можете отдать свой голос в поддержку этого.
Полифилл
Сейчас вам нужен полифилл. Глубокий вздох. При этом я считаю, что стоит продолжать использовать dialog, даже в этом промежуточном состоянии. Если вы со мной согласны, вот два варианта.
Полифилл Google Chrome. Плюсы: полифилл от команды Google Chrome. Легко использовать. Минусы: не такой уж и маленький.
A11Y-DIALOG. Плюсы: очень маленький. Разрабатывался с учетом доступности. Возможны варианты React и Vue. Минусы: требуется больше разметки, чем drop-in полифилл.
Автор: Chris Manning
Источник: https://www.viget.com/
Редакция: Команда webformyself.