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');
});
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ