4.1 Элемент <dialog>
В HTML5 так же появился элемент <dialog>, предназначенный для создания диалоговых окон и модальных окон на веб-страницах. Этот элемент позволяет легко и семантически правильно создавать всплывающие окна для различных целей, таких как уведомления, подтверждения, формы ввода и многое другое. Ниже мы рассмотрим, как использовать <dialog>, его атрибуты и методы, а также примеры использования.
Элемент <dialog> представляет собой диалоговое окно или другое интерактивное окно. Он может быть как модальным, так и немодальным. Внутри элемента <dialog> можно размещать любой HTML-контент, такой как текст, формы, кнопки и т. д.
Синтаксис:
<dialog>
<!-- Содержимое диалогового окна -->
</dialog>
<div style="min-height: 200px;">
<dialog id="favSuperHeroDialog">
<form method="dialog">
<div>
<label for="favSuperHero">Любимый супергерой:</label>
<select id="favSuperHero" name="favSuperHero">
<option></option>
<option>Капитан Америка</option>
<option>Железный Человек</option>
<option>Халк</option>
</select>
</div>
<div>
<button type="reset" id="cancel">Сбросить</button>
<button type="submit">Подтвердить</button>
</div>
</form>
</dialog>
<button id="updateDetails">Отрыть диалоговое окно</button>
</div>
<dialog id="favSuperHeroDialog">
<form method="dialog">
<div>
<label for="favSuperHero">Любимый супергерой:</label>
<select id="favSuperHero" name="favSuperHero">
<option></option>
<option>Капитан Америка</option>
<option>Железный Человек</option>
<option>Халк</option>
</select>
</div>
<div>
<button type="reset" id="cancel">Сбросить</button>
<button type="submit">Подтвердить</button>
</div>
</form>
</dialog>
<button id="updateDetails">Отрыть диалоговое окно</button>
// Получаем кнопки и диалог из DOM
const updateButton = document.getElementById("updateDetails");
const cancelButton = document.getElementById("cancel");
const dialog = document.getElementById("favSuperHeroDialog");
dialog.returnValue = "favSuperHero";
// Функция проверки состояния диалога (открыт/закрыт)
function openCheck(dialog) {
if (dialog.open) {
console.log("Диалог начат");
} else {
console.log("Диалог завершен");
}
}
// Открываем диалог по клику на кнопку Update
updateButton.addEventListener("click", () => {
dialog.showModal();
openCheck(dialog);
});
// Закрываем диалог по клику на кнопку Cancel
cancelButton.addEventListener("click", () => {
dialog.close();
openCheck(dialog);
});
4.2 Атрибуты и методы <dialog>
Атрибут open определяет, является ли диалоговое окно открытым. Если этот атрибут присутствует, диалог отображается на странице.
Пример использования атрибута open:
<dialog open>
<p>Это открытое диалоговое окно.</p>
</dialog>
Атрибут returnValue позволяет задавать значение, которое вернется при закрытии диалогового окна. Это свойство полезно для получения результата взаимодействия пользователя с диалогом.
<dialog returnvalue=”5”>
<p>Это открытое диалоговое окно.</p>
</dialog>
Метод show():
Открывает диалоговое окно без модального режима.
dialog.show();
Метод showModal():
Открывает диалоговое окно в модальном режиме, блокируя взаимодействие с остальной частью страницы.
dialog.showModal();
Метод close():
Закрывает диалоговое окно.
dialog.close();
4.3 События <dialog>
Событие close:
Событие, которое происходит при закрытии диалогового окна.
<div style="min-height: 200px">
<dialog id="myDialog">
<form method="dialog">
<p>Нажмите кнопку "Отмена" или "Ок" для возврата значения</p>
<div class="dialog-buttons">
<button value="cancel">Отмена</button>
<button value="confirm">ОК</button>
</div>
</form>
</dialog>
<button id="showDialog">Показать диалоговое окно</button>
</div>
<dialog id="myDialog">
<form method="dialog">
<p>Нажмите кнопку "Отмена" или "Ок" для возврата значения</p>
<div class="dialog-buttons">
<button value="cancel">Отмена</button>
<button value="confirm">ОК</button>
</div>
</form>
</dialog>
<button id="showDialog">Показать диалоговое окно</button>
// Получаем DOM элементы
const dialog = document.getElementById('myDialog');
const showDialogButton = document.getElementById('showDialog');
// Открытие модального окна
showDialogButton.addEventListener('click', () => {
dialog.showModal();
});
// При закрытии показываем returnValue
dialog.addEventListener('close', () => {
alert(`Диалог закрыт с возвратом значения: ${dialog.returnValue}`);
});
Событие cancel:
Событие, которое происходит при отмене диалогового окна (например, при нажатии клавиши Esc).
<div style="min-height: 200px">
<dialog id="myDialog">
<form method="dialog">
<p>Нажмите клавишу "Esc", чтобы увидеть результат</p>
</form>
</dialog>
<button id="showDialog">Открыть диалоговое окно</button>
</div>
<dialog id="myDialog">
<form method="dialog">
<p>Нажмите клавишу "Esc", чтобы увидеть результат</p>
</form>
</dialog>
<button id="showDialog">Открыть диалоговое окно</button>
// Получаем DOM элементы
const dialog = document.getElementById('myDialog');
const showDialogButton = document.getElementById('showDialog');
const closeButton = document.getElementById('closeButton');
// Открытие диалога
showDialogButton.addEventListener("click", () => {
dialog.showModal();
});
// Обработка отмены диалога (ESC или клик вне окна)
dialog.addEventListener('cancel', () => {
alert('Dialog was cancelled');
});
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ
Цена: $99
результат не отображается