HTMLDialogElement
=================

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
**Экспериментальная возможность:** **Это экспериментальная технология**  
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

**`HTMLDialogElement`** - интерфейс взаимодействия, предоставляющий методы для управления `<dialog>` элементами. Он наследует свойства и методы от `HTMLElement`.

Свойства
--------

*Наследует свойства от своего родителя, `HTMLElement`.*

`HTMLDialogElement.open`

`Boolean` (en-US) отражает HTML атрибут элемента `open`, указывающий на то, доступно ли диалоговое окно для воздействия.

`HTMLDialogElement.returnValue` (en-US)

`DOMString` устанавливает или возвращает передаваемое диалоговому окну значение.

Методы
------

*Наследует методы своего родителя, `HTMLElement`.*

`HTMLDialogElement.close()` (en-US)

Закрывает диалоговое окно. Опциональный `DOMString` может быть передан как аргумент, обновляющий `returnValue` диалогового окна.

`HTMLDialogElement.show()` (en-US)

Показывает диалоговое окно modelessly, т.е. остаётся возможность взаимодействовать с контентом вне диалогового окна.

`HTMLDialogElement.showModal()` (en-US)

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

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

Примеры ниже показывают простую кнопку, которая при нажатии открывает `<dialog>`, содержащий элемент `<form>`, используя метод `HTMLDialogElement.showModal()` (en-US). Вы можете нажать кнопку *Отмены,* чтобы закрыть диалоговое окно (используя функцию `HTMLDialogElement.close()` (en-US)), или принять форму, использую кнопку *Принятия*.


```html
<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <section>
      <p>
        <label for="favAnimal">Favorite animal:</label>
        <select id="favAnimal" name="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 dialog = document.getElementById("favDialog");
 dialog.returnValue = "favAnimal";

 function openCheck(dialog) {
 if (dialog.open) {
 console.log("Dialog open");
 } else {
 console.log("Dialog closed");
 }
 }

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

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


**Примечание:** You can find this example on GitHub as htmldialogelement-basic (see it live also).

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

| Specification |
| --- |
| HTML Standard # htmldialogelement |

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

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

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

* HTML-элемент, реализующий этот интерфейс взаимодействия: `<dialog>`.