Главная > CSS/Style Sheets > Создание модальных окон при помощи HTML5 Dialog

Создание модальных окон при помощи HTML5 Dialog


25 февраля 2014, 15:00. Разместил: Design FactoRy
Модальные окна – это один из наиболее распространенных элементов пользовательского интерфейса, который можно встретить на сайтах в интернете. Он часто используется для формы подписки, формы загрузки файлов (которую можно видеть в wordpress), отображения оповещений и других элементов, при помощи которых привлекают внимание пользователей.

Создание модальных окон при помощи HTML5 Dialog

До сих пор для создания модального окна мы использовали такие jQuery-плагины как jQuery UI Dialog, Twitter Bootstrap Modal или Popeasy. Однако вместе с HTML5 был представлен новый тег 'dialog', который позволяет нам создавать нативные модальные окна без особого труда.

Применение элемента Dialog

Элемент 'dialog' используется по тому же принципу, что и остальные HTML-элементы. Мы просто добавляем нужный нам контент в диалоговое окно следующим образом:

<dialog id="window">
<h3>Hello World!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, inventore!</p>
<button id="exit">Exit</button>
</dialog>
<button id="show">Show Dialog</button>

Однако учтите, что когда вы просматриваете этот элемент в Chrome (единственный браузер, который на данный момент поддерживает этот тег), диалоговое окно будет скрыто. И используя вышеприведенную HTML-структуру, мы увидим лишь кнопку Show Dialog. Чтобы отобразить диалоговое окно, мы можем воспользоваться функциями javascript API .show() и .close().

(function() {
var dialog = document.getElementById('window');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('exit').onclick = function() {
dialog.close();
};
})();

Нажмите по кнопке Show Dialog, и тогда перед вами появится предполагаемое окно.

Создание модальных окон при помощи HTML5 Dialog

Оформление такого диалогового окна производится посредством CSS. По умолчанию диалоговое окно закрывает все горизонтальное пространство браузера. Поэтому нам нужно указать его ширину:

dialog {
width: 500px;
}

Более того, элемент 'dialog' предоставляется с новым псевдо-классом ::backdrop. Он используется для стилизации затемненного фона, - эффекта, который часто встречается на сайтах. Это позволяет посетителям сфокусировать внимание на контенте диалогового окна, скрывая все, что находится за его пределами. На данный момент поддержки этого эффекта нет, однако ее следует ожидать в ближайшем времени.

В завершение

Технология HTML в последние пару довольно сильно развилась. Теперь ее можно использовать не только для конструирования веб-страниц, но и для разработки полноценных интерактивных пользовательских интерфейсов при помощи таких новых HTML-элементов как 'dialog', а также за счет применения javascript API. Пожалуйста учтите, что этот элемент экспериментальный, и пока что его нельзя использовать в крупных проектах. К тому же, работать он будет пока что только в Chrome при включенной функции Experimental Features (включить можно на странице chrome://flags).

Посмотреть демо | Скачать исходный код
Вернуться назад