Знакомство с элементом <dialog>

На заре веб-разработки создание модальных окон или всплывающих диалогов требовало значительных усилий и часто требовало сложных реализаций. Разработчикам иногда приходилось полагаться на различные библиотеки JavaScript или собственный код для достижения желаемой модальной функциональности. Пустые <div>elements иногда оказывались в дереве DOM только потому, что нам нужно было наложение для наших модальных окон. Все это могло или не могло быть препятствием для некоторых разработчиков, но что, если бы существовал элегантный способ сделать это?

Элемент <dialog>

В современном ландшафте веб-разработки создание модальных окон или всплывающих диалогов никогда не было проще и приятнее благодаря введению элемента <dialog> в HTML. Элемент <dialog> обеспечивает нативный и стандартизированный способ разработки и реализации модальных окон, что делает его мощным инструментом для улучшения взаимодействия с пользователем на веб-сайтах. С помощью нескольких строк HTML, CSS и JavaScript разработчики могут создавать элегантные и интерактивные модальные окна, которые привлекают пользователей и обеспечивают беспрепятственный просмотр. Давайте рассмотрим, как элемент ‹dialog› делает создание модальных окон в современной веб-разработке простым и приятным.

Как это используется?

Чтобы создать базовое модальное окно с помощью элемента <dialog>, мы можем начать с простой структуры HTML. Сам элемент <dialog> действует как контейнер для нашего модального контента. Мы можем добавить кнопку или ссылку, чтобы вызвать открытие диалогового окна. С помощью некоторых стилей CSS мы можем настроить внешний вид диалогового окна, например, установить ширину, высоту, цвет фона и положение. Добавляя функциональность JavaScript, мы можем прослушивать событие нажатия кнопки и использовать любой из двух доступных методов для отображения диалогового окна при запуске. Давайте посмотрим на эти методы.

показать() против showModal()

Диалоги скрыты по умолчанию. Их можно показать с помощью метода show() или метода showModal(). Когда они показаны, их можно скрыть методом close().

  • show(): когда метод .show() вызывается для элемента <dialog>, он отображает модальное окно в виде плавающего наложения на странице. Однако это не мешает взаимодействию с остальной частью страницы. Это означает, что пользователи по-прежнему могут взаимодействовать с элементами вне модального окна, пока оно видимо.
  • showModal(): Метод .showModal(), с другой стороны, отображает модальное окно как модальное диалоговое окно и обеспечивает модальное поведение. Когда модальное окно отображается с помощью .showModal(), это создает эффект блокировки, предотвращая взаимодействие с элементами вне модального окна. Пользователи должны взаимодействовать с модальным окном или закрыть его, прежде чем они смогут взаимодействовать с остальной частью страницы. Такое поведение обычно желательно для истинного модального взаимодействия, когда внимание пользователя должно быть сосредоточено на модальном содержимом и ни на чем другом.

Демо

Давайте посмотрим на практический пример модального окна, реализованного с использованием элемента <dialog>. Ниже приведен фрагмент кода, демонстрирующий минималистичное модальное окно с HTML и JavaScript:

<h1>Simple Modals</h1>

<!-- defines the modal content. It is hidden by defalut -->
<dialog id="my-dialog">
  <p>This is the content of the modal.</p>
  <button id="close-btn">Close</button>
</dialog>

<!-- We'll add an event listener on this button, to show the modal above -->
<button id="open-btn">Open Modal</button>

<script>
  const openBtn = document.getElementById('open-btn');
  const closeBtn = document.getElementById('close-btn');
  const dialog = document.getElementById('my-dialog');

  // shows the modal
  openBtn.addEventListener('click', () => {
    dialog.showModal();
  });

  // closes the modal
  closeBtn.addEventListener('click', () => {
    dialog.close();
  });
</script>

Outro

С помощью этой простой реализации с использованием элемента <dialog> мы теперь можем легко создавать модальные окна, экономя значительное время и усилия. Элемент <dialog> обеспечивает простой и интуитивно понятный подход к созданию модальных окон, позволяя разработчикам создавать привлекательные и интерактивные возможности на своих веб-сайтах. Нет необходимости иметь дело со сложностями пользовательских модальных реализаций.

Давайте построим эти элегантные модальные окна!

Следующие шаги

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