Новые элементы HTML5 и API-интерфейсы JavaScript позволяют создать комплексы сложных приложений для браузеров. Часть любого современного приложения является один или несколько диалоговых окон.
Они требуют от пользователя выполнения конкретных действий или обычный вывод сообщения. С новым элементом появилась возможность получения диалоговых окон с использованием чистого HTML5.
Простая разметка без таблиц стилей.
Элемент может быть размещен в любом месте HTML страницы. Не рекомендуется его использование внутри параграфа, потому как это может привести к проблемам отображения окон. Вероятнее всего это случается и с элементами которые содержат другие элементы и не только текст. Определения свойства „open“ отобразит диалоговые окна при открытии страницы. Без применения этого свойства окна в начальном состоянии будут закрыты.
Please read our Terms of Service. Terms of Service … …
В приведенном примере определено диалоговое окно между двумя параграфами. Расположение элемента таким образом позволит отобразить его горизонтально по центру не обращая внимания на другие элементы.
Позицию же по вертикали рассчитывает относительно верхнего края окна браузера. Если нас устраивает позиция элемента, то применение CSS не потребуется. Если стандартное представление не устраивает, то можно применить CSS и настроить согласно своему вкусу. Разрешается использовать все CSS свойства как для блочного элемента – самыми популярными являются „border-radius“ и „shadow“ для более привлекательных эффектов.
Использование JavaScript
В 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);
В приведенном примере определено два события. Первое событие приводит к открытию диалогового окна при нажатии на первый элемент “”. При нажатии на уже открытое диалоговое окно оно будет снова
закрыто.
Встроенные формы в диалоговых окнах
Элемент „
“ может содержать как простой текст, так и другие
элементы. Это позволяет размещать формы внутри диалогового окна, но при этом для обработки содержимого формы вместо общепринятых методов „post“ и „get“ необходимо использовать специальный метод „dialog“.
Our Terms of Service …
В приведенном примере в диалоговое окно вставлена форма с двумя кнопками. Нажатие любой из них приводит к закрытию диалогового окна. Необходимости в JavaScript нет, если нет необходимости предотвратить
закрытие окна по нажатию кнопки. Тогда достаточно добавить событие „click“ для кнопки „“, которое будет предотвращать
выполнение действия по умолчанию с помощью „preventDefault()“.
Событие на закрытие диалогового окна
Событие “close” позволяет нам выполнять действие при закрытии диалогового окна.
document.getElementsByTagName("dialog")[0]
.addEventListener("close", function(e) {
var answer = this.returnValue;
}, false);
Свойство „returnValue“ возвращает „value“ – значение элемента кнопка, которая используется для закрытия диалогового окна. В приведенном примере нажатие на кнопку «Отмена» вернет свойство „returnValue“ со значением „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);
Использование более одного диалогового окна
Если сразу используется более чем одно диалоговое окно, то есть необходимость в использовании листов стилей для того, чтобы удостовериться что ни одно окно не перекрывает друг друга. Исключение
составляют модальные окна, так как они всегда будут блокировать содержимое друг друга и тем самым исключают возможность с ними.
Поддержка браузеров
На данный момент поддержка элемента „
“ еще недостаточна.
Только Chrome и Safari корректно работают с этим элементом. Все же остальные браузеры работают как с обычным блочным элементом, который отображает содержимое независимо установлено свойства “open” или нет.
Источник — http://www.noupe.com/css/html5-native-dialogue-windows-
with-the-new-dialog-element-84117.html
