Элемент dialog HTML

Элемент dialog HTML

От автора: давайте поговорим о всплывающих окнах. Или модалах, оверлеях или как вам нравится их называть (не забудьте, лайтбокс). Несмотря на то, что многим пользователям это не нравится, эти элементы остаются популярными в Интернете. Но их технические реализации могут быть дико непоследовательными. Хотите больше не изобретать велосипед? Этот пост поможет вам решить задачу, как отобразить контент поверх другого контента.

Проблема

Реализация решений для всплывающих окон может быть непростой. То, что на первый взгляд кажется тривиальным, может оказаться более сложным в условиях нехватки времени. Возможно, вам придется учитывать дизайн модалов. И анимацию. Как насчет индивидуального поведения при представлении форм? Что произойдет, если одновременно будет выведено несколько модалов?

Вы можете найти решение с помощью плагинов. Но есть так много вариантов и вопросов, которые следует учитывать:

API

Доступность

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Зависимости. Возможно, вам не нужны jQuery, React или подобное.

Поддержка. Кто его поддерживает? Как скоро решаются вопросы?

Расширяемость. Насколько легко настроить и добавить новые функции?

Конечно, вы можете вместо этого создать свой собственный плагин. Но насколько это гибкое решение? Можете ли вы повторно использовать его как есть в других местах? Как насчет других проектов?

Решение

Введите элемент HTML dialog! Представленный в HTML 5.2 (2018), dialog является оригинальным элементом браузера для создания всплывающих окон и модалов.

Элемент dialog предоставляет:

Элемент, который легко вывести и скрыть, включая логический атрибут самого элемента open.

Две версии: стандартная popover или модальная.

Псевдо-элемент ::backdrop для модальных типов.

Встроенный фокус: см. этапы выделения фокусом элемента dialog.

Поддержка ARIA (диалог подразумевается по умолчанию). Также принимает роль alertdialog.

Отложенный стек для нескольких dialog.

Интерфейс DOM с атрибутом open и методами show , showModal и close.

И это лишь некоторые моменты! Отображать контент поверх другого контента никогда не было проще.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Стандартное использование

Модальное использование

Модальная версия активируется с помощью метода, dialog.showModal(). Она отличается от стандартного использования следующим:

Гарантируется, чтобы окно размещалось поверх любых других элементов, независимо от их z-индекса.

Для стилизации предоставляется dialog::backdrop.

Закрытие с помощью клавиши Esc.

::backdrop

Укажите dialog::backdrop для назначения стилей фона модального окна. Действительно удобно для полупрозрачного фонового наложения.

Диалоговые формы

Новый атрибут форм, method=»dialog», может использоваться в элементах dialog. Указав атрибут, мы можем предоставить содержимое атрибута value кнопки отправки для самого элемента.

Могу ли я использовать?

На момент написания этой статьи поддержка браузерами для элемента dialog составляет около 70%. Но есть надежда, что этот процент увеличится. Реализация в Firefox уже почти готова. Статус в Edge для элемента — находится на рассмотрении: «… вероятно, в будущем релизе». Вы можете отдать свой голос в поддержку этого.

Полифилл

Сейчас вам нужен полифилл. Глубокий вздох. При этом я считаю, что стоит продолжать использовать dialog, даже в этом промежуточном состоянии. Если вы со мной согласны, вот два варианта.

Полифилл Google Chrome. Плюсы: полифилл от команды Google Chrome. Легко использовать. Минусы: не такой уж и маленький.

A11Y-DIALOG. Плюсы: очень маленький. Разрабатывался с учетом доступности. Возможны варианты React и Vue. Минусы: требуется больше разметки, чем drop-in полифилл.

React и Vue.

Автор: Chris Manning

Источник: https://www.viget.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Курс по HTML5: основы

Изучите HTML5 с нуля!

Смотреть курс

Метки:

Похожие статьи:

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree