Тег <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 или щелчка мыши.
Примеры
Самый простой пример.
<p>Окно, созданное тегом dialog!</p>
</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»>×</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.
 |
 |
 |
 |
 |
 |
 |
| — | — | + | — | — | — | — |
