Тег DIALOG.

  Парный блочный тег DIALOG предназначен для создания псевдоокна.
  Весь внутренний контент (включая контент "дочерних" тегов) элемента тега DIALOG может быть выведен поверх окружающего его контента (как бы в новом окне).

  Появление псевдоокна с внутренним контентом элемента тега DIALOG управляется его единственным атрибутом.
  Это псевдоокно, по существу, является полем элемента тега DIALOG, размеры которого, по умолчанию, подгоняются под его контент, который, по умолчанию, отображается в рамке.

  По умолчанию, псевдоокно горизонтально всегда позиционируется в центре области отображения (окна или фрейма).
  Вертикальное позиционирование псевдоокна зависит от "родительского" окружения элемента тега DIALOG.

  Впрочем, к псевдоокну, как и к любому полю элемента блочного тега применимы все стили CSS, в том числе, и стили размеров, рамок и позиционирования.

  Если в элемент тега DIALOG вложен элемент тега FORM, то псевдоокно становится диалоговым, и данные формы можно получить, как результат диалога, открытого элементом тега DIALOG.

  Допускается сколь угодная вложенность - элементов тега DIALOG.

  Соответствующий интерфейс HTMLDialogElement предоставляет дополнительный функционал для использования псевдоокон.
  Не браузеры поддерживают тег DIALOG.
  Атрибуты:
  OPEN - Открывает псевдоокно вместе со всем содержимым.

  • Значение:

    • Нет, только присутствие.

  • Значение по умолчанию - Выключен (псевдоокно не отображается).
      Если элемент тега DIALOG связан с элементом тега FORM, то, при отправке соответствующей формы, псевдоокно закрывается, и возникает событие close на соответствующем экземпляре объекта HTMLDialogElement.
  • Атрибут не обязательный.


Пример (настройки браузера должены разрешать модальные окна):

<FIELDSET ID=FILD STYLE="width: 270px; height: 40px; border: 1px solid black">
  <LEGEND>Для ввода даты - наведите мышку.</LEGEND>
  <STRONG>Дата - </STRONG>
  <OUTPUT ID=outD>Дата не указана</OUTPUT>
</FIELDSET>
<DIALOG ID=pseudoBox>
  <STRONG>Укажите дату (Esc - отмена):</STRONG><BR><BR>
  <FORM ID=formD method="dialog">
    <INPUT ID=inpD TYPE="date" NAME="Дата">
    <BUTTON ID=butD TYPE="submit" NAME="submit" VALUE="Текущая дата" STYLE="color: red">
      Текущая дата
    </BUTTON>
  </FORM>
</DIALOG>
........
<SCRIPT>
  var DT = new Date();
  var toLD = function(X) { return (X.substr(8,2) + "." + X.substr(5,2) + "." + X.substr(0,4)); };
  var N0 = document.getElementById("pseudoBox");
  var N1 = document.getElementById("formD");
  var N2 = document.getElementById("outD");
  var N3 = document.getElementById("inpD");
  var N4 = document.getElementById("FILD");
  var N5 = document.getElementById("butD");
  N5.value = DT.toLocaleDateString();
  N5.innerText = DT.toLocaleDateString();
  var st = function(X) { N0.close(toLD(N3.value)); };
  var sx = function(X) { if ( N0.returnValue.length != 0 ) { N2.value = N0.returnValue; } };
  var sy = function(X) { N3.value = ""; N0.showModal(); };
  var sz = function(X) { N0.returnValue = N3.value; };
  N4.onmouseenter = sy;
  N1.oninput = st;
  N0.onclose = sx;
  N0.oncancel = sz;
</SCRIPT>
Результат:
Для ввода даты - наведите мышку. Дата - Дата не указана
Укажите дату (Esc - отмена):