556 Модальные окна используются в качестве форм входа в учетную запись, регистрационных форм, для привлечения внимания пользователя к чему-то важному. Раньше для создания модальных окон подключались различные внешние плагины, такие как UI Dialog или аналоги. С выходом HTML5 появилась возможность создавать модальные окна, используя тег <dialog>.
В браузере Chrome, к примеру, при переходе по адресу chrome://flags/ и активации пункта указанного на картинке ниже, можно увидеть пример модального окна:
Вы не увидите это окно, если не выполните все шаги, описанные выше.
HTML
Для правильного использования тега <dialog> нужно просто написать его в соответствующем месте кода:
|
1 2 3 4 5 6 |
<dialog id="window"> <h3>Привееет!</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, inventore!</p> <button id="exit">Закрыть</button> </dialog> <button id="show">Показать</button> |
Javascript
На момент написания этой статьи единственным браузером, поддерживающим элемент <dialog>, является Google Chrome. Однако даже в Chrome окно диалога по умолчанию скрыто. На странице отображается только кнопка «Показать». Если мы хотим, чтобы окно диалога отобразилось, нам придется использовать JavaScript:
|
1 2 3 4 5 6 7 8 9 |
(function() { var dialog = document.getElementById('window'); document.getElementById('show').onclick = function() { dialog.show(); }; document.getElementById('exit').onclick = function() { dialog.close(); }; })(); |
Плюсом тега <dialog> является то, что он значительно упрощает веб-разработку. Недостатком же можно назвать то, что пока этот тег функционирует только в одном браузере.
