Главная > CSS/Style Sheets > Создание модальных окон при помощи HTML5 Dialog
Создание модальных окон при помощи HTML5 Dialog25 февраля 2014, 15:00. Разместил: Design FactoRy |
Модальные окна – это один из наиболее распространенных элементов пользовательского интерфейса, который можно встретить на сайтах в интернете. Он часто используется для формы подписки, формы загрузки файлов (которую можно видеть в wordpress), отображения оповещений и других элементов, при помощи которых привлекают внимание пользователей. До сих пор для создания модального окна мы использовали такие jQuery-плагины как jQuery UI Dialog, Twitter Bootstrap Modal или Popeasy. Однако вместе с HTML5 был представлен новый тег 'dialog', который позволяет нам создавать нативные модальные окна без особого труда. Применение элемента Dialog Элемент 'dialog' используется по тому же принципу, что и остальные HTML-элементы. Мы просто добавляем нужный нам контент в диалоговое окно следующим образом:
Однако учтите, что когда вы просматриваете этот элемент в Chrome (единственный браузер, который на данный момент поддерживает этот тег), диалоговое окно будет скрыто. И используя вышеприведенную HTML-структуру, мы увидим лишь кнопку Show Dialog. Чтобы отобразить диалоговое окно, мы можем воспользоваться функциями javascript API .show() и .close().
Нажмите по кнопке Show Dialog, и тогда перед вами появится предполагаемое окно. Оформление такого диалогового окна производится посредством CSS. По умолчанию диалоговое окно закрывает все горизонтальное пространство браузера. Поэтому нам нужно указать его ширину:
Более того, элемент 'dialog' предоставляется с новым псевдо-классом ::backdrop. Он используется для стилизации затемненного фона, - эффекта, который часто встречается на сайтах. Это позволяет посетителям сфокусировать внимание на контенте диалогового окна, скрывая все, что находится за его пределами. На данный момент поддержки этого эффекта нет, однако ее следует ожидать в ближайшем времени. В завершение Технология HTML в последние пару довольно сильно развилась. Теперь ее можно использовать не только для конструирования веб-страниц, но и для разработки полноценных интерактивных пользовательских интерфейсов при помощи таких новых HTML-элементов как 'dialog', а также за счет применения javascript API. Пожалуйста учтите, что этот элемент экспериментальный, и пока что его нельзя использовать в крупных проектах. К тому же, работать он будет пока что только в Chrome при включенной функции Experimental Features (включить можно на странице chrome://flags). Посмотреть демо | Скачать исходный код Вернуться назад |