HTML тег dialog

Тег <dialog> (от англ. dialog — диалог) — создаёт диалоговое окно, в котором можно выводить сообщение или форму. Диалоговое окно отображается с белым фоном и чёрной рамкой.

HTML тег dialog имеет один атрибут open — без этого атрибута в стилях к нему добавляется display: none и окно не выводится в браузере.

Стиль тега по умолчанию:

position: absolute;
left: 0;
right: 0;
margin: auto;
border: solid;
padding: 1em;
background: white;
color: black;
display: none;

Тег dialog был создан для модальных окон.

Модальное окно в графическом интерфейсе пользователя — окно, которое блокирует работу пользователя с родительским приложением до тех пор, пока пользователь это окно не закроет. Модальными преимущественно реализованы диалоговые окна. Также модальные окна часто используются для привлечения внимания пользователя к важному событию или критической ситуации.

Источник — Википедия

Модальное окно создается с помощью HTML, CSS и JavaScript. После открытия они располагаются поверх содержимого страницы. Закрывается модальное окно с помощью клавиши Esc или щелчка мыши.

Примеры

Самый простой пример.

<dialog open>
<p>Окно, созданное тегом dialog!</p>
</dialog>

Результат

Окно, созданное тегом dialog!

Более сложный пример с JavaScript и CSS

<div>
<dialog id=»myFirstDialog» style=»width:50%;background-color:#F4FFEF;border:1px dotted black;»>
<p><q>Я настолько умен, что иногда не понимаю ни единого слова из того, что говорю.
</q> — <cite>Оскар Уайльд</cite></p>
<button id=»hide»>Закрыть</button>
</dialog>
<button id=»show»>Показать Dialog</button>
</div>

<script type=»text/JavaScript»>
(function() {
var dialog = document.getElementById(‘myFirstDialog’);
document.getElementById(‘show’).onclick = function() {
dialog.show();
};
document.getElementById(‘hide’).onclick = function() {
dialog.close();
};
})();
</script>

Результат

Я настолько умен, что иногда не понимаю ни единого слова из того, что говорю.
Оскар Уайльд

Последнее время я часто работаю с Bootstrap, поэтому приведу пример модального окна, созданного с помощью Bootstrap:

<button type=»button» class=»btn btn-primary» data-toggle=»modal» data-target=»#staticBackdrop»>
Открыть модальное окно
</button>

<div class=»modal fade» id=»staticBackdrop» data-backdrop=»static» data-keyboard=»false» tabindex=»-1″ aria-labelledby=»staticBackdropLabel» aria-hidden=»true»>
<div class=»modal-dialog»>
<div class=»modal-content»>
<div class=»modal-header»>
<h5 class=»modal-title» id=»staticBackdropLabel»>Заголовок модального окна</h5>
<button type=»button» class=»close» data-dismiss=»modal» aria-label=»Close»>
<span aria-hidden=»true»>&times;</span>
</button>
</div>
<div class=»modal-body»>
Текст — содержимое модального окна.
</div>
<div class=»modal-footer»>
<button type=»button» class=»btn btn-secondary» data-dismiss=»modal»>Закрыть</button>
</div>
</div>
</div>
</div>

Результат

Поддержка браузерами

На момент редактирования статьи (дата последнего изменения вверху страницы) тег поддерживается только браузером Google Chrome.

иконка IE Иконка edge Иконка chrome Иконка opera Иконка safari Иконка firefox Иконка android
+

Анатолий Бузов
Анатолий Бузов / об авторе

Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.


Добавить комментарий

Ваш адрес email не будет опубликован.