Введение в HTML элемент dialog
Диалоги часто используются в веб-приложениях. Они используются для отображения подтверждающих сообщений, оповещений и других вещей, которые подходят для всплывающих окон.
До существования элемента диалогового окна, мы могли использовать только функции встроены в JavaScript для отображения текста сообщений alert и confirm. Они не могут быть стилизованы и не могут отображать ничего, кроме текста.
Также диалоги alert и confirm не могут иметь никаких кнопок, кроме встроенных.
Чтобы упростить создание диалогов без добавления библиотек, теперь мы можем использовать элемент dialog для создания всплывающих диалоговых окон.
В этой статье мы рассмотрим, как добавлять элементы dialog в наши приложения и как с ними работать.
Создание диалогов
Для создания диалогов мы добавим элемент dialog следующим образом:
Как вы можете заметить, dialog у нас с атрибутом open, чтобы отобразить диалоговое окно. Стиль по умолчанию зависит от браузера.
В Chrome это выглядит примерно так:
Мы можем добавить любой HTML-элемент. Например, мы можем добавить форму следующим образом:
В dialog у нас есть элемент form с method установленным как dialog. Это позволяет нам установить возвращаемое значение диалога, которое мы можем использовать после закрытия окна, нажав «Confirm».
У нас также есть элементы input и select, чтобы позволить нам что - то вводить в нашу форму.
Кроме того, у нас есть кнопка с идентификатором dialog-button, чтобы открыть наше диалоговое окно.
Затем в нашем коде JavaScript мы можем управлять открытием и закрытием диалога и получать введенные значения следующим образом:
const dialogButton = document.getElementById('dialog-button');
const dialog = document.querySelector('dialog');
const output = document.querySelector('output');
const input = document.querySelector('input');
const select = document.querySelector('select');
const confirmBtn = document.getElementById('confirm-btn');
dialogButton.addEventListener('click', () => {
if (typeof dialog.showModal === "function") {
dialog.showModal();
}
});
select.addEventListener('change', (e) => {
confirmBtn.value = [select.value, input.value].join(' ');
});
input.addEventListener('change', (e) => {
confirmBtn.value = [select.value, input.value].join(' ');
});
dialog.addEventListener('close', () => {
output.value = dialog.returnValue;
});
Чтобы открыть dialog у нас есть:
dialogButton.addEventListener('click', () => {
if (typeof dialog.showModal === "function") {
dialog.showModal();
}
});
Метод showModal открывает dialog.
Также у нас есть слушатели для select и input чтобы получить их значения, если пользователь что-то вводит.
Стилизация фона
Чтобы стилизовать фон dialog, мы можем выбрать его с помощью псевдоэлемента ::backdrop и применить к нему стили. Фон рисуется только тогда, когда отображается dialog.
Например, мы можем стилизовать его следующим образом:
dialog::backdrop {
background-color: lightblue !important;
}
Элемент dialog экономит нам некоторые усилия при создании всплывающих окон. Нам не нужны библиотеки или много кода для создания простых диалогов.
