Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML5
Webdesign

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

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
How to Use HTML5 “picture”, “srcset”, and “sizes” for Responsive Images
HTML5 Form Validation With the “pattern” Attribute

Russian (Pусский) translation by Aleksandr Dokin (you can also view the original English article)

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

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

Использование элемента Dialog

<dialog> появился в HTML5 (в 5.1 если точнее). Он классифицируется как "корневой секционный" элемент, так же как и элементы <body> , <blockquote> и <details>, каждый из которых устанавливает новый независимый блок с контентом. Вы можете разместить его как дочерний к body элемент или же использовать наподобие <div> или <section> – оба этих подхода правильные.

Поддерживающие браузеры (Chrome 37+ и Opera 27+) по умолчанию будут показывать элемент <dialog> скрытым, делая его видимым при вызове show() или showModal(), а также close() чтобы снова скрыть его. Как правило, мы будем запускать этот метод при срабатывании события click, вот так:

Отличия между методами show() и showModal()

Стоит отметить, что методы show() и showModal() ведут себя по-разному.

Метод show() открывает диалог в соответствии с его положением внутри DOM. Если вы добавили его непосредственно перед </body>, он появится внизу страницы. Нам пришлось бы добавлять кастомные стили например для позиционирования диалога в центр страницы. Эти стили обычно используют z-index для показа элемента выше других, выставляется свойство position в absolute, вместе с left и top.

Метод showModal() напротив покажет элемент как модальное окно. Оно будет отображаться по центру страницы, располагается в верхнем слое, как в fullscreen API, который предотвращает наложения применением z-index, относительного позиционирования (relative position) и overflow к родительскому элементу.

В большинстве случаев, вполне вероятно, мы будем использовать showModal() вместо метода show().

Кастомизация стилей

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

К тому же, когда элемент <dialog> показывается методом showModal(), мы имеем в своем распоряжении дополнительный псевдоэлемент ::backdrop. Этот псевдоэлемент располагается непосредственно под диалоговым окном, перекрывая всю область просмотра (viewport).

Он используется в качестве прозрачного темного фона – кликните по красной кнопке, чтобы увидеть в действии:

Добавляем элегантность с помощью transitions

Кастомизация стилей диалогового окна должна быть простой, но что по поводу добавления CSS transition? Что насчет плавного открытия окна, используя эффект масштабирования, примерно так же как это делает OS X?

Шаг 1

Для начала мы уменьшим масштаб диалогового окна на 90%, применим transition и скроем окно с глаз долой.

Шаг 2

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

Шаг 3

Наш трюк состоит в том, чтобы "задержать" диалоговое окно малого масштаба на несколько миллисекунд прежде чем добавить класс dialog-scale. Чтобы добиться этого, мы добавляем класс, используя js-метод setTimeout():

Шаг 4

Не забываем удалить этот класс и очистить timeout при закрытии диалогового окна.

На этом все! Результат можно посмотреть на следующем демо:

Подводя итог

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

caniuse dialog
http://caniuse.com/#feat=dialog

А до тех пор можно использовать polyfil от Google Chrome для симуляции подобного поведения в браузерах, которые этого еще не поддерживают.

Дополнительные материалы

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.