Диалоги в 2022 году

Содержание

Введение в HTML-элемент <dialog>
Как использовать
Простой пример на HTML и JavaScript
Пример React
Ссылки

Введение в HTML-элемент `<dialog>`

Диалогами было особенно трудно управлять, потому что не было способа «поднять» ваш <div> на верхний уровень страницы. В таких фреймворках, как React, эту проблему можно решить с помощью библиотек, предоставляющих такую функциональность. Однако мы по-прежнему перекладываем проблему на кого-то другого и полагаемся на его решение.

HTML-элемент <dialog> упрощает наши кодовые базы и позволяет нам сосредоточиться на важных частях наших приложений. Safari и Firefox поддерживают <dialog> с марта 2022 года. Chrome поддерживал его уже с 2014 года.

Основные преимущества элемента <dialog>:

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

Как использовать

Диалоги очень просты в использовании. Сначала вам нужно создать элемент <dialog> с содержимым, которое вы хотите отобразить.

<dialog>
  <h1>Hello World</h1>
  <p>This is a dialog</p>
</dialog>

Вход в полноэкранный режим Выйти из полноэкранного режима

Кроме этого, вам нужно только вызвать showModal() на элементе <dialog>, чтобы показать его, и close, чтобы закрыть его. Также можно закрыть диалог, нажав ESC. Если вы хотите, вы можете отключить это поведение с помощью функции event.preventDefault() в событии close диалога.

Простой пример на HTML и JavaScript

В этом примере мы используем простой HTML и JavaScript. Вы можете увидеть работу примера в демонстрационном ролике.

<button id="openDialog">Open dialog</button>
<dialog id="myDialog">
  <h1>Hello World</h1>
  <p>This is a dialog</p>
  <button id="closeDialog">Close</button>
</dialog>

Вход в полноэкранный режим Выход из полноэкранного режима

const myDialog = document.getElementById("myDialog");

const openDialogButton = document.getElementById("openDialog");
openDialogButton.addEventListener("click", () => {
  myDialog.showModal();
});

const closeDialogButton = document.getElementById("closeDialog");
closeDialogButton.addEventListener("click", () => {
  myDialog.close();
});

Вход в полноэкранный режим Выход из полноэкранного режима

Пример React

В этом примере мы создаем компонент React для отображения диалога.

import { useRef } from "react";

export const Dialog = () => {
  const myDialog = useRef();

  return (
    <div>
      <button onClick={() => myDialog.current.showModal()}>Open dialog</button>
      <dialog ref={myDialog}>
        <div>
          <p>Hello world!</p>
          <p>Press ESC or click the button to close.</p>
          <button onClick={() => myDialog.current.close()}>Close</button>
        </div>
      </dialog>
    </div>
  );
};

Войти в полноэкранный режим Выход из полноэкранного режима

Вы можете увидеть React-компонент в действии в конце статьи в моем блоге.

Ссылки

Представление элемента Dialog — WebKit
<dialog>: Элемент Dialog — MDN