Тег диалогового окна HTML - httpdoc.ru

HTML-диалог

<dialog> Тег используется для определения диалогового окна , такие как всплывающие окна или модального окна, которая визуализируется в активном окне браузера. <dialog> Элемент использует атрибут , open который активирует элемент.

Тег диалогового окна HTML

Ниже приведен пример использования тега dialog. Взгляните на него, чтобы понять, как его использовать.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Dialog Tag </title>  
  <style>
    table, th, td {
    border: 1px solid black; 
    }
  </style>
</head>
<body>

<p><b>Note:</b> The dialog tag is not supported in Edge/Internet Explorer.</p>

<table>
  <tr>
    <th>January <dialog open>This is an open dialog window</dialog></th>
    <th>February</th>
    <th>March</th>
  </tr>
  <tr>
    <td>31</td>
    <td>25</td>
    <td>29</td>
  </tr>
</table>

</body>
</html>

Выход

HTML Dialog Tag
Январь Это открытое диалоговое окно Февраль Март
31 год 25 29

Диалоговое окно с Javascript

Его также можно использовать с javascript для повышения интерактивности, как в примере ниже.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript Prompt Dialog Box </title> 
</head>
<body>
 <script>
  var name = prompt("What's your name?");
 
  if(name.length > 0 && name != "null") {
   document.write("Hi, " + name);
   } else {
   document.write("Hello Anonymous!");
    }
 </script>
</body>
</html>

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

Элемент
Microsoft Edge browser.png Край
Chrome browser.png Хром
Firefox browser.png Fire Fox
Opera browser.png Опера
safari browser.png Сафари
<dialog>
да
да
да
да
да