HTMLDialogElement.open
======================

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

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

Синтаксис
---------
```

dialogInstance.open = true;
var myOpenValue = dialogInstance.open;
```

### Значение

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

Свойство доступно только для чтения — значение можно установить программно методы show и hide элемента `<dialog>`.

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

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


```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");
 }
 }

 // Кнопка обновления открывает диалоговое окно
 updateButton.addEventListener("click", function () {
 dialog.showModal();
 openCheck(dialog);
 });

 // Кнопка отмены закрывает диалоговое окно
 cancelButton.addEventListener("click", function () {
 dialog.close("animalNotChosen");
 openCheck(dialog);
 });
 })();
</script>
```


**Примечание:** вы можете найти данный пример на htmldialogelement-basic (see it live also).

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

| Specification |
| --- |
| HTML Standard # dom-dialog-open |

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

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

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

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