Нативные модальные окна в HTML5 с помощью элемента dialog

Размытие меню с помощью CSS3 переходов

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

Традиционно такие модальные окна создавались с помощью JavaScript, в большинстве случаев с использованием фреймворков или библиотек. Сегодня подобная модальная сущность имеет нативную (встроенную) поддержку в HTML5 (если быть точнее, то в версии HTML 5.1: элемент <dialog> не совсем входит в официальную HTML5 спецификацию). Процесс добавления данного нового элемента на страницу является очень простым:

Разметка

Базовая разметка для нативного диалогового окна не будет для вас чем-то неожиданным:

<dialog id="dialog">
  <h3>Вы уверены?</h3>
<p>Вы нажали на большую красную кнопку. Это может привести к… чему-нибудь.
  <div>
  <button id="okay">Ok, продолжим</button>
  <button id="cancel">Отмена</button>
</div>
</dialog>

По умолчанию браузер не должен показывать содержимое элемента <dialog> до тех пор, пока оно не будет отображено с помощью добавления атрибута open. Данный атрибут можно добавить, используя один из методов, о котором я собираюсь рассказать далее. В качестве действия, вызывающего появление диалогового окна, могут использоваться различные варианты: загрузка страницы, нажатие (клик) по большой красной кнопке или что-нибудь еще. Например, пусть это будет загрузка страницы:

var dialog = document.getElementById('dialog');
dialog.show();

Если вы попробуете посмотреть результат в одном из поддерживающих данную возможность браузеров (на момент написания статьи это Chrome и Opera), то вы увидите, что элемент dialog расположен в самом верху окна браузера. Вы также заметите, что вы по-прежнему можете взаимодействовать с контентом на странице (выделять текст, активировать другие элементы пользовательского интерфейса и т.д.). Это сильно отличается от вызова элемента dialog в качестве модального окна: измените dialog.show() на dialog.showModal() и перезагрузите страницу.

И хотя содержимое элемента dialog никак не изменилось, вы увидите несколько важных изменений, присущих API (программный интерфейс приложения) showModal(): сейчас окно уже размещается в центре области просмотра (viewport), а остальная часть страницы затемнена и недоступна для взаимодействия.

Управление и закрытие

Теоретически, элемент dialog может содержать любую информацию, на которой нужно заострить внимание пользователя: форма, видео или любой другой элемент. Одновременно у вас может быть открыто много элементов dialog, но — только одно модальное окно. В любом случае, вам наверняка потребуется элемент пользовательского интерфейса, который будет закрывать подобные окна. Для этого мы можем использовать созданную ранее кнопку «Отмена»:

document.getElementById("cancel").onclick = function() {
      dialog.close();
}

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

Оформление

Элемент dialog можно оформлять с помощью обычного CSS:

dialog { font-family: Avenir, sans-serif; width: 25%; text-align: center; border: 3px solid; }
dialog div { display: flex; justify-content: space-between; }

Дополнительно, API showModal() создает новый псевдо-элемент ::backdrop, который по умолчанию закрывает всю область просмотра и может быть оформлен отдельно:

dialog::backdrop { background: rgba(0,0,0,0.9); }

На практике, модальные диалоговые окна рассматриваются, как промежуточный шаг на пути к полноэкранному API: подобно полноэкранному контенту модальные диалоговые окна захватывают управление областью просмотра, но в тоже время они необязательно должны вызываться пользователем. Модальные диалоговые окна могут вызываться и при загрузке страницы, а вот полноэкранный контент — нет.

Важно отметить, что окно элемента dialog появляется на самом верхнем уровне (слое) области просмотра. Это значит, что никакое значение свойства z-index не способно поместить другой элемент поверх элемента dialog. Это также означает, что расположение (позиционирование) элемента dialog не будет унаследовано ни от какого родительского элемента. Для непосредственного выравнивания данного элемента было предложено CSS свойство anchor-point, но пока что оно не имеет браузерной поддержки и не работает даже с использованием полифилла (polyfill).

Поддержка

Элемент dialog до сих пор не имеет хорошей кроссбраузерной поддержки: он поддерживается только в Chrome 37+ и Opera 24+ на десктопных и мобильных устройствах, хотя, несомненно, остальные браузеры к ним присоединятся. Между тем у Google есть отличный диалоговый полифилл, который не привязан к какому-либо фреймворку и работает путем вставки нескольких добавлений в ваш CSS.

Независимо от того, используете ли вы полифилл или нет, браузерное определение возможностей ориентировано на подход, который используется во многих тестах поддержки возможностей: создание элемента с помощью JavaScript и проверка на добавление к нему значения атрибута.

var testdialog=document.createElement("dialog");
testdialog.setAttribute("open", "");
if (testdialog.open==true){
   // браузер поддерживает элемент dialog
} else {
 // браузер не поддерживает данный элемент, т.е нужно загрузить полифилл
}

По мере того, как улучшается поддержка элемента

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

Посмотрите демо-пример на CodePen

Автор: Dudley Storey

Источник: http://demosthenes.info/

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

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

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

Комментарии (1)

  1. BECEJLbE / Данил

    Страшно уже,блин! Сколько уже размножилось клонов div`a!
    Ещё один вот,появился. Как же я хочу,что бы W3C его отвергли…

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

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

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

Я не робот.

Spam Protection by WP-SpamFree