HTMLDialogElement.open

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

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

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

Синтаксис

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

Значение

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

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

Примеры

Примеры ниже показывают простую кнопку, которая по нажатию открывает <dialog>, содержащий <form>, используя showModal() метод. Вы можете нажать кнопку Отмена для закрытия (используя HTMLDialogElement.close() метод) или принять <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
# dom-dialog-open

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
open

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

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

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