HTMLDialogElement: свойство open

Базовая Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2022 года.

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

Значение

Булево значение, представляющее состояние атрибута HTML open. true означает, что он установлен, и, следовательно, диалоговое окно отображается. false означает, что он не установлен, и, следовательно, диалоговое окно не отображается.

Свойство не является только для чтения — можно программно установить значение для отображения или скрытия диалогового окна.

Примеры

Следующий пример демонстрирует простую кнопку, которая при нажатии открывает диалоговое окно <dialog>, содержащее форму, с помощью метода showModal(). Оттуда вы можете нажать кнопку Отмена для закрытия диалогового окна (с помощью метода HTMLDialogElement.close()) или отправить форму с помощью кнопки отправки.

<!-- Simple pop-up dialog box -->
<dialog id="dialog">
  <form method="dialog">
    <button type="submit">Close</button>
  </form>
</dialog>

<p>
  <button id="openDialog">Open Dialog</button>
</p>
<p id="dialogStatus"></p>

<script>
  (() => {
    const openDialog = document.getElementById("openDialog");
    const dialog = document.getElementById("dialog");
    const text = document.getElementById("dialogStatus");

    function openCheck(dialog) {
      if (dialog.open) {
        text.innerText = "Dialog open";
      } else {
        text.innerText = "Dialog closed";
      }
    }

    // Update button opens a modal dialog
    openDialog.addEventListener("click", () => {
      dialog.showModal();
      openCheck(dialog);
    });

    dialog.addEventListener("close", () => {
      openCheck(dialog);
    });
  })();
</script>

Результат

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

Спецификация
HTML # dom-dialog-open

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`open`	37	79	98	24	15.4	37	98	24	15.4	3.0	37

См. также

Элемент HTML, реализующий этот интерфейс: <dialog>.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/open