Создания диалоговых окон на чистом HTML5

Published 4 года ago // No comments

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

Ранее для создания диалоговых окон требовалось подключить jQuery плагин вроде Pop Easy, Twitter Bootstrap Modal или jQuery UI Dialog. Однако теперь значительно выросший в возможностях HTML 5 позволяет избежать их использования, используя для этого встроенный элемент под названием <dialog>.

Ранее в далеком 2009 году данный элемент уже был в составе HTML 5, однако был из него исключен. Теперь он снова возвращается — уже в новой форме.

Поддержка элемента <dialog> браузерами

К сожалению, на данный момент его поддержка крайне ограничена. Его возможно использовать лишь в Safari 6.0 и Chrome Canary. При этом в Chrome Canary требуется его предворительно активировать в настройках. Для этого перейдите по адресу  chrome://flags и включите “Enable experimental Web Platform features”.

Взаимодействие с HTMLDialogElement

Методы:

HTMLDialogElement имеет следующие методы, позволяющие работать с диалоговыми окнами.

  • show(): Этот метод используется для открытия диалога. Отличие данного метода от следующего заключается в том, что у пользователей несмотря на открытое окошко диалога по прежнему есть возможность пользоваться страницей — они могут ее скролить, что-то копировать, переходить по ссылкам без перезагрузки страницы и т.п.
  • showModal(): В данном случае у пользователя есть доступ лишь к открытому «модальному окну».
  • close(): Данный метод закрывает диалог. Забегая немного вперед скажу, что в нем можно передать параметр returnValue.

Атрибуты:

HTMLDialogElement включает в себя следующие два атрибута.

  • returnValue:  Возвращает параметр, который был передан в close() — его указывать не обязательно, он опциональный.
  • open: Является Boolean-типом данных. Что говорит о том, что он может принимать только два значения — true, в этом случае диалог будет показан пользователю, или false, тогда он скрыт.

События:

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

Помимо выше упомнянутых методов и атрибутов, <dialog> также поддерживает:

  • form[method="dialog"]: Используется для интеграции формы с <dialog>.  Работает благодаря данной привязки только внутри диалогового окна.
  • атрибут autofocus: Нужен для фокуса на инпутах  внутри диалога.
  • cancel event: Данный event будет срабатывать после закрытия окна через клавишу “Esc”.

Теперь, изучив основы <dialog>, можно посмотреть на практике пример его использования.

Синтаксис создания диалоговых окон

Код настолько понятен и прост, что думаю не требует пояснений. Что нужно понимать, это то, что содержание всплывающего окна заключается внутрь тега <dialog>, а его вызов должен находится вне данного тега.

Для показа содержимого элемента <dialog> требуется использование JavaScript, а именно вызов методов .show() и .close(). Они уже упоминались ранее.

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

Стилизации диалоговых окон

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

popup1

Создание модальных диалоговых окон

Если требуется полностью сфокусировать внимание пользователя на всплывающем окне, есть смысл использовать модальные диалоговые окна. Их вызов не сильно отличается от обычных. Требуется изменить лишь в JS файле .show() на the.showModal(). В HTML не нужно ничего менять.

Добавляем задний фон модальному окну

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

popup2

Вместо заключения

Я искренне рад реикарнации элемента <dialog>. Со временем не нужно будет подключать лишний раз дополнительные плагины и грузить ими сервер лишними раз. Однако стоит признать, что пока слишком рано для использования данного элемента в рабочих проектах из-за его малой поддерживаемостью. Будем надеятся его поддержкой скоро обзаведутся и другие браузеры.