HTML5: новый элемент Dialog

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

Простая разметка без стилей

Элемент <dialog> может быть размещен в любом месте внутри тега body на HTML-странице. Не рекомендуется размещать его в текстовых параграфах - <p>, так как это может привести к проблемам с отображением. Это, скорее всего, произойдет с элементами <dialog>, которые содержат дополнительные элементы и не только текстовые. Определение свойства "open" покажет диалоговое окно при открытии страницы. Без этого свойства окно будет в первоначальном виде закрыто.

<p>Пожалуйста, прочтите наши <span>Условия предоставления услуг</span>.</p>
<dialog open>
    Условия предоставления услуг …
</dialog>
<p>…</p>

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

Если стандартное представление не для вас, добавьте свои собственные стили и настройте его по своему вкусу. Вы можете использовать любые свойства CSS, как для настройки блочных элементов - наиболее используемые "border-radius" и "shadow" для дополнительных эффектов.

Управление Dialog с помощью JavaScript

Чтобы открыть и закрыть элемент <dialog> используйте методы JavaScript show() и close().

document.getElementsByTagName("span")[0].addEventListener("click", function() {
    document.getElementsByTagName("dialog")[0].show();
}, false);

document.getElementsByTagName("dialog")[0].addEventListener("click", function() {
    this.close();
}, false);

В нашем примере мы определяем два события. Первое событие приводит к открытию диалогового элемента при нажатии на первый элемент <span>. При нажатии на открытое диалоговое окно оно будет закрыто.

Формы внутри элемента Dialog

Элемент <dialog> способен содержать не только простой текст, но также дополнительные элементы. Это позволяет нам, например, разместить форму внутри диалогового окна. Имейте ввиду, что вместо обычных методов "post" и "get" вам нужно будет использовать специальный метод "dialog" для обработки содержимого формы.

<dialog>
    <p>Наши Условия предоставления услуг …</p>
    <form method="dialog">
        <button type="submit" value="yes">Принять</button>
        <button type="submit" value="no">Отказаться</button>
    </form>
</dialog>

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

Реакция на закрытие диалогового окна

Событие "close" позволяет нам реагировать на закрытие диалогового окна.

document.getElementsByTagName("dialog")[0].addEventListener("close", function(e) {
    var answer = this.returnValue;
}, false);

Свойство "returnValue" возвращает "value" - значение кнопки, которая была использована, чтобы закрыть окно. Если в нашем примере была нажата кнопка "Отказаться" "ReturnValue" вернет значение "no" (value="no"). Это дает нам простой способ инициирования определенных функций в зависимости от нажатой кнопки.
Создание модального диалогового окна

Если вы хотите быть уверенным, что никакое другое содержимое вашей HTML-страницы не может быть доступно пока диалоговое окно открыто, то вы можете использовать модальные диалоговые окна. Они будут открыты только при помощи JavaScript и его метода "showModal()". Модальные диалоги делают неактивным все другое содержимое. Вы не можете нажать, изменить, или выбрать неактивное содержимое.

document.getElementsByTagName("dialog")[0].showModal();

В отличие от стандартных диалоговых окон, модальный вариант будет отцентрирован не только по горизонтали, но и по вертикали.

Если вы хотите использовать другой цвет вы можете использовать псевдо-элемент "::backdrop". Убедитесь, чтобы вы выбрали цвет с низким значением "RGBA()", чтобы избежать полного сокрытия содержания.

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

В нашем примере мы решили использовать светло-желтый цвет. Если вы хотите, вы можете выбрать фоновое изображение вместо цвета.

Модальные диалоги всегда можно закрыть нажав клавишу ESC. Это делает необходимым добавить еще одно событие в диалоге. Как только событие "close" сработало, когда окно закрывается с помощью кнопки формы, убедитесь, чтобы вы добавили событие "cancel". Оно будет срабатывать, как только модальное окно закроется при помощи клавиши ESC.

document.getElementsByTagName("dialog")[0].addEventListener("cancel", function(e) {
    var answer = "cancelled";
}, false);

Использование более одного элемента Dialog на странице

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

Поддержка браузерами

Поддержка элемента <dialog> еще не достаточно распространена на момент написания этой статьи. Только Chrome и Safari интерпретируют элемент правильно. Все остальные браузеры рассматривают его как простой блочный элемент, что означает, что они всегда будут показывать его содержимое независимо от того установлено свойство "open" или нет. Текущее положение дел можно проверить здесь.