HTMLDialogElement

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

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

must be a string

Свойства

Наследует свойства от своего родителя, 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
# htmldialogelement
HTML
# event-beforetoggle
HTML
# event-toggle

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

api.HTMLDialogElement

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
HTMLDialogElement
cancel event
close
close event
closedBy
Experimental
open
requestClose
Experimental
returnValue
show
showModal

Legend

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

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.

api.HTMLElement.beforetoggle_event.dialog_elements

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
beforetoggle event fires at dialog elements

Legend

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

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support

api.HTMLElement.toggle_event.dialog_elements

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
toggle event fires at dialog elements

Legend

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

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support

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

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