Диалоги и модальные окна являются неотъемлемой частью большинства веб-приложений. Хотя создание их вручную не является сложной задачей, она быстро становится утомительной для любого веб-разработчика. Обычной альтернативой созданию их вручную является использование компонента, созданного кем-то другим.

Однако с этим подходом есть несколько проблем. Вариантов так много, что становится трудно понять, какой компонент лучше всего использовать, и настройка внешнего вида таких компонентов иногда может быть такой же утомительной, как создание диалогового окна. рукой. К счастью, есть еще одна альтернатива: HTML-элемент диалога.

Что такое элемент диалога?

HTML-элемент диалога — это встроенный HTML-тег (например, div или span), который позволяет разработчикам создавать собственные диалоги и модальные окна. Элемент диалога существует в Chrome и Opera с 2014 года, но только недавно стал поддерживаться всеми основными браузерами.

Зачем использовать элемент диалога?

Основная причина использования элемента диалога — удобство. Это позволяет легко создавать диалоги, которые могут отображаться как встроенные или отображаться как модальные, с помощью всего лишь одного тега HTML и нескольких строк JavaScript.

instagram viewer

Элемент диалогового окна устраняет необходимость создания и отладки пользовательского диалогового окна или импорта чужого компонента. Также очень легко стилизовать с помощью CSS.

Поддержка браузером элемента диалога

К сожалению, браузерная поддержка элемента диалога могла бы быть лучше. Он поддерживается в последних версиях всех основных браузеров по состоянию на март 2022 года с некоторыми оговорками.

Любой браузер Firefox старше Firefox 98 будет поддерживать его только в том случае, если он включен вручную в настройках браузера, а любая версия Safari до Safari 15.4 вообще не поддерживает его. Полная информация о поддержке браузера доступна на могу ли я использовать.

К счастью, это не означает, что элемент диалога непригоден для использования. Команда Google Chrome поддерживает полифилл, который вы можете найти на Гитхаб для элемента диалога, который обеспечивает его поддержку даже в браузерах, где он изначально не поддерживается.

В своей текущей форме элемент диалогового окна может иметь проблемы с доступностью, поэтому может быть более подходящим использовать настраиваемый компонент диалогового окна, например a11y-диалог в производственных приложениях.

Как использовать элемент диалога

Чтобы продемонстрировать, как использовать элемент диалогового окна, вы будете использовать его для создания общей функции веб-сайта: модального окна подтверждения для кнопки удаления.

Все, что требуется для выполнения, — это один HTML-файл.

1. Настройте файл HTML

Начните с создания указанного файла и назовите его index.html.

Затем установите структуру HTML-файла и предоставьте некоторую базовую метаинформацию о странице, чтобы она правильно отображалась на всех устройствах.

Введите следующий код в index.html:

<!ДОКТИП HTML>
<html язык="en">
<глава>
<мета кодировка ="UTF-8">
<мета http-эквивалент="X-UA-совместимый" содержание ="IE=край">
<мета имя ="окно просмотра" содержание ="ширина = ширина устройства, начальный масштаб = 1,0">
<заглавие>Демонстрация диалога</title>
</head>
<стиль></style>


<тело></body>
<сценарий></script>
</html>

Это все настройки, необходимые для этого проекта.

2. Написание разметки

Далее напишите разметку для кнопки удаления, а также элемента диалога.

Введите следующий код в тег body файла index.html:

<раздел класс ="кнопка-контейнер">
<кнопка>
Удалить вещь
</button>
</div>
<диалог>
<див>
 Вы уверены, что хотите этого Удалитьэто вещь?
</div>
<див>
<класс кнопки ="Закрыть">
 Да
</button>
<класс кнопки ="Закрыть">
 Нет
</button>
</div>
</dialog>

Приведенный выше HTML-код создаст:

  • Кнопка удаления.
  • Элемент диалога.
  • Две кнопки внутри диалога.

Если index.html открыт в вашем браузере, единственным видимым элементом на экране будет кнопка удаления. Это не означает, что что-то не так, элемент диалога просто требует немного JavaScript, чтобы стать видимым.

3. Добавление JavaScript

Теперь напишите код, который будет открывать диалоговое окно, когда пользователь нажимает кнопку удаления, а также код, позволяющий закрыть диалоговое окно.

Введите следующее в тег сценария index.html:

константа модальный = документ.querySelector("диалог")
документ.querySelector(".button-контейнер кнопка").addEventListener("нажмите", () => {
модальный.showModal();
});
константа закрытьBtns = документ.getElementsByClassName ("закрыть");
for (btn из closeBtns) {
 btn.addEventListener("нажмите", () => {
модальный.Закрыть();
 })
}

Этот код использует метод querySelector чтобы получить ссылки на кнопки и диалог. Затем он прикрепляет прослушиватель событий щелчка к каждой кнопке.

Вы могли быть знакомы с прослушиватели событий в JavaScript, которые вы можете использовать сами. Прослушиватель событий, прикрепленный к кнопке удаления, вызывает метод showModal() для отображения диалогового окна при нажатии кнопки.

Каждая кнопка внутри модального окна имеет прикрепленный к ней прослушиватель событий, который использует метод close() для скрытия диалогового окна при нажатии на них.

Даже если в коде нет JavaScript, вызывающего метод close(), пользователи также могут закрыть модальное окно, нажав клавишу выхода на клавиатуре.

Теперь, когда этот JavaScript на месте, если пользователь нажмет кнопку «Удалить», модальное окно откроется, а нажатие кнопки «да» или «нет» закроет модальное окно.

Вот как должно выглядеть открытое модальное окно:

Следует отметить, что элемент диалогового окна уже имеет некоторые стили, хотя в index.html нет CSS. Модальное окно уже центрировано, у него есть граница, ширина ограничена содержимым, и у него есть отступы по умолчанию.

Пользователи не могут взаимодействовать (щелкать, выбирать) с чем-либо в фоновом режиме, пока открыто модальное окно.

Элемент диалога также может отображаться как часть потока страницы, а не как модальное окно. Чтобы попробовать, измените первый прослушиватель событий в JavaScript следующим образом:

документ.querySelector(".button-контейнер кнопка").addEventListener("нажмите", () => {модальный.показать(); });

Единственное, что изменилось в этом коде, это то, что код вызывает метод show() вместо метода showModal(). Теперь, когда пользователь нажимает кнопку удаления элемента, модальное окно должно открываться в строке следующим образом:

4. Добавить стиль

Затем настройте внешний вид диалогового окна и его фон, написав CSS.

CSS уменьшит границу диалога, ограничит его максимальную ширину, а затем затемнит фон, а также добавит немного стилизации кнопкам.

Стилизация самого диалогового окна проста, но псевдокласс фона необходим для добавления стиля, нацеленного на фон диалогового окна.

Вставьте следующий код в тег стиля index.html:

диалог:: фон {
 фон: черный;
непрозрачность: 0.5;
}
кнопка {
 радиус границы: 2px;
 цвет фона: белый;
 граница: 1px сплошной черный;
 поле: 5px;
 box-shadow: 1px 1px 2px серый;
}
диалог {
 максимальная ширина: 90vw;
 граница: 1px сплошной черный;
}

Когда диалоговое окно открыто, теперь оно должно выглядеть так:

И вы построили полнофункциональный диалог.

Элемент Dialog — отличный способ построить модальные окна

С помощью диалогового элемента HTML, недавно получившего поддержку во всех основных браузерах, веб-разработчики теперь могут создавать полностью функциональные, легко настраиваемые модальные окна и диалоги с одним тегом HTML и несколькими строками JavaScript и без необходимости полагаться на третью сторону решение.

Элемент диалога имеет полифилл, поддерживаемый командой Google Chrome, что позволяет разработчикам использовать диалог в версиях браузера, которые его не поддерживают.