<dialog>

Представляет собой диалоговое окно, в котором можно выводить сообщение или форму, например, для входа на сайт.

Диалоговое окно отображается со следующим предустановленным стилем.

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

Таким образом диалоговое окно отображается с белым фоном, чёрной рамкой и по центру горизонтальной оси. Ширина совпадает с шириной родительского контейнера.
Для отображения и сокрытия диалогового окна применяются, соответственно, методы show() и hide(), как показано в примере ниже. Кроме того, диалог можно превратить в модальное окно, используя вместо show() метод showModal(). В этом случае остальные элементы на странице блокируются — текст нельзя выделить, а кнопки нажать до тех пор, пока диалоговое окно не будет закрыто. Также модальное окно можно закрыть клавишей Esc.

Закрывающийся тег:

Обязателен

Поддержка:

HTML5

Атрибуты:

open - Отображает диалоговое окно. Без этого атрибута в стилях к нему добавляется display: none и окно не выводится в браузере.

<dialog open>
   <p>Лекционный курс, представленный на сайте, позволяет получить основные навыки в веб-программировании 
         —  разделе программирования, ориентированном на разработку веб-приложений. </p>
   <p><button id="clodeDialog">Закрыть</button></p>
 </dialog>

Пример:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title> тег <dialog> </title>
  <style>
   body {
    background: rgba(204, 177, 177, 1);
    background-size: cover;
   }
   dialog {
    background: rgba(156, 118, 118, 1);
    width: 500px;
    border-radius: 10px;
   }
  </style>
 </head> 
 <body> 
  <button id="openDialog">Открыть</button>
  <dialog>
   <p>Лекционный курс, представленный на сайте, позволяет получить основные навыки в веб-программировании 
         — разделе программирования, ориентированном на разработку веб-приложений. Целью курса является
         формирование у студентов знаний клиент-серверных технологий, языков разметки документов, принципов
         работы с базами данных и, собственно, самих языков веб-программирования.</p>
   <p><button id="clodeDialog">Закрыть</button></p>
  </dialog>
  <script>
   var dialog = document.querySelector('dialog');
   document.querySelector('#openDialog').onclick = function() {
    dialog.show(); // Показываем диалоговое окно
   }
   document.querySelector('#clodeDialog').onclick = function() {
    dialog.close(); // Прячем диалоговое окно
   }
  </script>
 </body> 
</html>