<dialog>
========

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**Экспериментальная возможность:** **Это экспериментальная технология**  
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

**HTML-элемент `<dialog>`** определяет диалоговое окно или другой интерактивный элемент, такой как инспектор или окно. Элементы `<form>` могут интегрироваться с диалогом с помощью указания атрибута `method="dialog"`. Когда отправляется такая форма, диалог закрывается с returnValue равным value нажатой кнопки submit.

`::backdrop` CSS псевдо-элемент может быть использован для стилизации фона подложки элемента `<dialog>`, например для затемнения недоступного содержимого, пока диалог активен.

| Категории контента | Основной поток, секционный контент |
| --- | --- |
| Разрешённый контент | Основной поток |
| Опускание тегов | Нет, открывающий и закрывающий теги обязательны. |
| Разрешённые родительские элементы | Любой элемент, в котором разрешён основной поток |
| DOM-интерфейс | `HTMLDialogElement` |

Атрибуты
--------

Этот элемент включает в себя общие атрибуты. Атрибут `tabindex` не должен использоваться с `<dialog>` элементом.

`open`

Этот атрибут сообщает о том, что диалог активен и доступен для взаимодействия. Когда атрибут open не установлен, диалог не должен быть видим для пользователя.

Примеры
-------

### Пример 1


```html
<dialog open>
  <p>Greetings, one and all!</p>
</dialog>
```

### Пример 2


```html
<!-- Простой попап диалог с формой -->
<dialog id="favDialog">
  <form method="dialog">
    <section>
      <p>
        <label for="favAnimal">Favorite animal:</label>
        <select id="favAnimal">
          <option></option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </p>
    </section>
    <menu>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

<script>
 (function () {
 var updateButton = document.getElementById("updateDetails");
 var cancelButton = document.getElementById("cancel");
 var favDialog = document.getElementById("favDialog");

 // Update button opens a modal dialog
 updateButton.addEventListener("click", function () {
 favDialog.showModal();
 });

 // Form cancel button closes the dialog box
 cancelButton.addEventListener("click", function () {
 favDialog.close();
 });
 })();
</script>
```



```html
<!-- Простой попап диалог с формой -->
<dialog id="favDialog">
  <form method="dialog">
    <section>
      <p>
        <label for="favAnimal">Favorite animal:</label>
        <select id="favAnimal">
          <option></option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </p>
    </section>
    <menu>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

<script>
 (function () {
 var updateButton = document.getElementById("updateDetails");
 var cancelButton = document.getElementById("cancel");
 var favDialog = document.getElementById("favDialog");

 // Update button opens a modal dialog
 updateButton.addEventListener("click", function () {
 favDialog.showModal();
 });

 // Form cancel button closes the dialog box
 cancelButton.addEventListener("click", function () {
 favDialog.close();
 });
 })();
</script>
```

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

| Specification |
| --- |
| HTML Standard # the-dialog-element |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Событие `close`
* Событие `cancel`
* HTML forms guide.