This page was translated from English by the community.Learn more and join the MDN Web Docs community.
HTMLDialogElement
Экспериментальная возможность:Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотритетаблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
HTMLDialogElement - интерфейс взаимодействия, предоставляющий методы для управления<dialog> элементами. Он наследует свойства и методы отHTMLElement.
Свойства
Наследует свойства от своего родителя,HTMLElement.
HTMLDialogElement.openBooleanотражает HTML атрибут элементаopen, указывающий на то, доступно ли диалоговое окно для воздействия.HTMLDialogElement.returnValueDOMStringустанавливает или возвращает передаваемое диалоговому окну значение.
Методы
Наследует методы своего родителя,HTMLElement.
HTMLDialogElement.close()Закрывает диалоговое окно. Опциональный
DOMStringможет быть передан как аргумент, обновляющийreturnValueдиалогового окна.HTMLDialogElement.show()Показывает диалоговое окно modelessly, т.е. остаётся возможность взаимодействовать с контентом вне диалогового окна.
HTMLDialogElement.showModal()Показывает диалог как модальное окно поверх любых других диалоговых окон, которые также могут существовать в данный момент. Взаимодействие с контентом вне диалогового окна заблокировано.
Примеры
Примеры ниже показывают простую кнопку, которая при нажатии открывает<dialog>, содержащий элемент<form>, используя методHTMLDialogElement.showModal(). Вы можете нажать кнопкуОтмены, чтобы закрыть диалоговое окно (используя функциюHTMLDialogElement.close()), или принять форму, использую кнопкуПринятия.
<!-- Simple pop-up dialog box, containing a form --><dialog> <form method="dialog"> <section> <p> <label for="favAnimal">Favorite animal:</label> <select name="favAnimal"> <option></option> <option>Brine shrimp</option> <option>Red panda</option> <option>Spider monkey</option> </select> </p> </section> <menu> <button type="reset">Cancel</button> <button type="submit">Confirm</button> </menu> </form></dialog><menu> <button>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 ashtmldialogelement-basic (see it live also).
Спецификации
| Specification |
|---|
| HTML # htmldialogelement |
| HTML # event-beforetoggle |
| HTML # event-toggle |
Совместимость с браузерами
api.HTMLDialogElement
api.HTMLElement.beforetoggle_event.dialog_elements
api.HTMLElement.toggle_event.dialog_elements
Смотрите также
- HTML-элемент, реализующий этот интерфейс взаимодействия:
<dialog>.