This page was translated from English by the community. Learn more and join the MDN Web Docs community.
<dialog>
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.
HTML-элемент <dialog> определяет диалоговое окно или другой интерактивный элемент, такой как инспектор или окно. Элементы <form> могут интегрироваться с диалогом с помощью указания атрибута method="dialog". Когда отправляется такая форма, диалог закрывается с returnValue равным value нажатой кнопки submit.
::backdrop CSS псевдо-элемент может быть использован для стилизации фона подложки элемента <dialog>, например для затемнения недоступного содержимого, пока диалог активен.
| Категории контента | Основной поток, секционный контент |
|---|---|
| Разрешённый контент | Основной поток |
| Опускание тегов | Нет, открывающий и закрывающий теги обязательны. |
| Разрешённые родительские элементы | Любой элемент, в котором разрешён основной поток |
| DOM-интерфейс | HTMLDialogElement |
Атрибуты
Этот элемент включает в себя общие атрибуты. Атрибут tabindex не должен использоваться с <dialog> элементом.
open-
Этот атрибут сообщает о том, что диалог активен и доступен для взаимодействия. Когда атрибут open не установлен, диалог не должен быть видим для пользователя.
Примеры
Пример 1
<dialog open>
<p>Greetings, one and all!</p>
</dialog>
Пример 2
<!-- Простой попап диалог с формой -->
<dialog id="favDialog">
<form method="dialog">
<section>
<p>
<label for="favAnimal">Favorite animal:</label>
<select id="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 favDialog = document.getElementById("favDialog");
// Update button opens a modal dialog
updateButton.addEventListener("click", function () {
favDialog.showModal();
});
// Form cancel button closes the dialog box
cancelButton.addEventListener("click", function () {
favDialog.close();
});
})();
</script>
<!-- Простой попап диалог с формой -->
<dialog id="favDialog">
<form method="dialog">
<section>
<p>
<label for="favAnimal">Favorite animal:</label>
<select id="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 favDialog = document.getElementById("favDialog");
// Update button opens a modal dialog
updateButton.addEventListener("click", function () {
favDialog.showModal();
});
// Form cancel button closes the dialog box
cancelButton.addEventListener("click", function () {
favDialog.close();
});
})();
</script>
Спецификации
| Specification |
|---|
| HTML # the-dialog-element |
Совместимость с браузерами
Loading...
Смотрите также
- Событие
close - Событие
cancel - HTML forms guide.