<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 |
Совместимость с браузерами
Смотрите также
- Событие
close - Событие
cancel - HTML forms guide.