HTMLDialogElement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since март 2022 г..

* Some parts of this feature may have varying levels of support.

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

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

EventTarget Node Element HTMLElement HTMLDialogElement

Свойства

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

HTMLDialogElement.open

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

HTMLDialogElement.returnValue

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

Методы

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

HTMLDialogElement.close()

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

HTMLDialogElement.show()

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

HTMLDialogElement.showModal()

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

Примеры

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

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).