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.
io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/ru/web/api/html_dom_api/index.md)
Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
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()
), или принять форму, использую кнопку Принятия.
<!-- 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>
.