dialog

Содержание

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

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

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

Таким образом диалоговое окно отображается с белым фоном, чёрной рамкой и по центру горизонтальной оси. Ширина совпадает с шириной родительского контейнера.

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

Синтаксис

<dialog open>
...
</dialog>

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

Обязателен.

Атрибуты

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

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>dialog</title>
  <style>
   body {
    background: url(image/shark.jpg) no-repeat;
    background-size: cover;
   }
   dialog {
    background: rgba(255, 255, 255, 0.7);
    width: 300px; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
   }
  </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>

Результат данного примера показан на рис. 1. При нажатии на кнопку «Открыть окно» отображается содержимое элемента <dialog>, до этого невидимое. При нажатии на кнопку «Закрыть окно» диалоговое окно скрывается.

Вид диалогового окна

Рис. 1. Вид диалогового окна

Спецификация

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5.1Рабочий проект

Браузеры

Internet ExplorerChromeOperaSafariFirefox
3724
AndroidFirefox MobileOpera MobileSafari Mobile
30




Рекомендую хостинг: beget.ru

Сервер падал:3 дн. 6:42 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru