Использование элемента HTML <dialog>

Создание модальных и немодальных диалоговых окон

Введение

Элемент HTML5 «диалог» пригодится для реализации модальных и немодальных диалогов в веб-интерфейсах. Очень важно понимать, как использовать этот элемент. Основные браузеры (такие как Chrome и Safari) на протяжении многих лет способствовали улучшению элемента «диалог».

Содержание

Что такое элемент ‹dialog›
Чем не является элемент ‹dialog><
Поддержка браузера
Как использовать элемент ‹dialog>
Заключение
Ресурсы

Что такое элемент ‹dialog›

По данным Рабочей группы по технологиям веб-гипертекстовых приложений (WHATWG), элемент «диалог» представляет собой временную часть приложения в виде небольшого окна («диалоговое окно»), с которым пользователь взаимодействует для выполнения задачи или собирать информацию. Как только пользователь завершит работу, диалоговое окно может быть автоматически закрыто приложением или закрыто пользователем вручную.

Его можно использовать для создания:

Модальные окна
Отклоняемые оповещения
Диалоговые окна

Кто-то может спросить, почему бы просто не использовать оповещения, подтверждения и запросы методов JavaScript? Дело в том, что эти методы блокируют сценарии.

Чем не является элемент ‹dialog><

Согласно определению элемента «диалог», данным WHATWG, это диалоговое окно, с которым пользователь может взаимодействовать для сбора информации или выполнения задачи. Следовательно, его не следует использовать для всплывающих подсказок, контекстных меню или всплывающих списков. поля, поскольку это не диалоговые окна. Для создания элементов такого типа можно использовать традиционные элементы «div» и стилизовать их с помощью CSS.

Поддержка браузера

Элемент «диалог» поддерживается большинством основных браузеров.

Сафари 15.4
Хром 37
Край 79
Фаерфокс 98

Более подробную информацию о поддержке и совместимости браузеров можно найти на странице caniuse.

Для браузеров без поддержки можно использовать полифилл.

Как использовать элемент ‹dialog›

Элемент «диалог» можно использовать как в модальном, так и в немодальном диалоговом окне.

Модальные окна

Модальные окна — это пользовательские интерфейсы, которые блокируют взаимодействие пользователя внутри диалогового окна, и с внешним содержимым невозможно взаимодействовать. У них самый высокий z-индекс на странице — они появляются поверх других элементов.

Элемент ‹dialog› можно использовать в качестве модального окна, отобразив его с помощью метода showModal().

<dialog id="modal">
    <p>Do you want to delete this file?</p>
    <form>
      <button id="submit">Yes</button>
      <button id="close" value="close" formmethod="dialog">No</button>
    </form>
</dialog>

<script>
  let modal = document.getElementById("modal");
  modal.showModal();
</script>

Когда элемент ‹dialog› открывается как модальное окно, он имеет псевдоэлемент ::backdrop, который затемняет области за пределами модального окна. Фон можно стилизовать с помощью CSS. Он также стилизован user-agent так, чтобы иметь позицию: фиксированную и размещать ее в центре страница.

Его можно закрыть, нажав клавишу Escape.

Учитывая доступность, когда элемент ‹dialog› используется в качестве модального окна, он будет иметь неявное значение aria-modal="true". ‹dialog› эквивалентен элементу с role="dialog".

Фокус устанавливается на первый вложенный фокусируемый элемент. Атрибут autofocus можно использовать для установки элемента, на котором пользователь хочет сфокусироваться при открытии модального окна.

Модальное окно имеет два события (закрытие и отмена).

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

Если модальное окно закрывается с помощью элемента формы (например, кнопки), запускается событие закрытия.

Модальное окно имеет некоторые свойства и методы:

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

Примечание.Чтобы быть отклоненным элементом формы, форма должна иметь атрибут метод диалогили элемент формы должен иметь атрибут formmethodдля dialog .

<dialog id="modal">
    <p>Do you want to delete this file?</p>
    <form>
      <input />
      <br />
      <button id="submit" value="submit">Yes</button>
      <button id="close" value="close" formmethod="dialog">No</button>
    </form>
</dialog>

<script>
  document.addEventListener("DOMContentLoaded", () => {
      let modal = document.getElementById("modal");
      let input = document.getElementsByTagName("input")[0];
      let submitBtn = document.getElementById("submit");
    
      modal.showModal();
      modal.onclose = () => {
        console.log("closed: ", modal.returnValue);
      };
      modal.oncancel = () => {
        console.log("cancelled: ", modal.returnValue);
      };
    
      submitBtn.onclick = (e) => {
        e.preventDefault();
        modal.close(input.value);
      };
  });
</script>

Из приведенного выше фрагмента: если в поле ввода введено "привет" при нажатии кнопки Да , модальное окно закрывается, а значение поля ввода (привет) передается как returnValue. При этом активируется событие onclose и “closed: hello” выполняется вход в систему. консоль.

Немодальные диалоги

Немодальные диалоговые окна можно открыть с помощью метода show() или атрибута open ‹dialog›. Пользователь по-прежнему может взаимодействовать с окружающим содержимым за пределами диалогового окна. Не существует псевдоэлемента ::backdrop, блокирующего другое содержимое.

Клавишу Escape нельзя использовать для закрытия немодального диалогового окна. Его необходимо закрыть, вызвав метод close() или используя элемент формы с Для атрибута formmethod установлено значение диалог.

<dialog id="dialog">
    <p>Do you want to delete this file?</p>
    <form>

        <input />
        <br />
        <button id="submit" value="submit">Yes</button>
        <button id="close" value="close" formmethod="dialog">No</button>
    </form>
</dialog>

<script>
  document.addEventListener("DOMContentLoaded", () => {
      let dialog = document.getElementById("dialog");
  
      let input = document.getElementsByTagName("input")[0];
      let submitBtn = document.getElementById("submit");
  
      dialog.show();
  
      dialog.onclose = () => {
          console.log("closed: ", dialog.returnValue);
      };
  
      submitBtn.onclick = (e) => {
          e.preventDefault();
          dialog.close(input.value);
      };
  });
</script>

Учитывая доступность, когда элемент ‹dialog› используется как немодальный, он будет иметь неявный aria-modal="false".

Заключение

Элемент «диалог» имеет функциональные возможности (свойства и методы), которые упрощают создание модальных окон и диалоговых окон.

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

Ресурсы

Если вам это нравится, пожалуйста, аплодируйте, комментируйте и подписывайтесь.

Спасибо, что прочитали.

Спасибо, что дочитали до конца. Пожалуйста, следите за автором и этой публикацией. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.

Использование элемента HTML