модальное окно с помощью HTML5

Делаем модальное окно с помощью HTML5

Модальные окна используются в качестве форм входа в учетную запись, регистрационных форм, для привлечения внимания пользователя к чему-то важному. Раньше для создания модальных окон подключались различные внешние плагины, такие как UI Dialog или аналоги. С выходом HTML5 появилась возможность создавать модальные окна, используя тег <dialog>.

Демо Скачать

В браузере Chrome, к примеру, при переходе по адресу chrome://flags/ и активации пункта указанного на картинке ниже, можно увидеть пример модального окна:

Вы не увидите это окно, если не выполните все шаги, описанные выше.

HTML

Для правильного использования тега <dialog> нужно просто написать его в соответствующем месте кода:

Javascript

На момент написания этой статьи единственным браузером, поддерживающим элемент <dialog>, является Google Chrome. Однако даже в Chrome окно диалога по умолчанию скрыто. На странице отображается только кнопка «Показать». Если мы хотим, чтобы окно диалога отобразилось, нам придется использовать JavaScript:

Плюсом тега <dialog> является то, что он значительно упрощает веб-разработку. Недостатком же можно назвать то, что пока этот тег функционирует только в одном браузере.


Оставить комментарий