HTMLDialogElement

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.

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

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

Свойства

Наследует свойства от своего родителя, 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).

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

Specification
HTML Standard # htmldialogelement

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

BCD tables only load in the browser

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

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