<dialog> элемент HTML dialog

Элемент <dialog> HTML представляет модальное или немодальное диалоговое окно либо другой интерактивный компонент, например закрываемое предупреждение, инспектор или подокно.

Атрибуты

Этот элемент включает глобальные атрибуты.

closedby

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

• Действие пользователя для закрытия щелчком снаружи, при котором <dialog> закрывается, когда пользователь щёлкает или касается области за его пределами. Это эквивалентно поведению «закрытия щелчком снаружи» всплывающих окон в состоянии «auto».
• Действие пользователя, специфичное для платформы, например нажатие клавиши Esc на настольных платформах или жест «назад» либо «закрыть» на мобильных платформах.
• Механизм, заданный разработчиком, например элемент <button> с обработчиком click, который вызывает HTMLDialogElement.close(), или отправка формы <form>.

Возможные значения:

any

Диалоговое окно можно закрыть любым из трёх способов.

closerequest

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

none

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

Если для элемента <dialog> не задано допустимое значение closedby, то

• если он был открыт с помощью showModal(), он ведёт себя так, как если бы значением было "closerequest"
• в противном случае он ведёт себя так, как если бы значением было "none".

open

Указывает, что диалоговое окно активно и доступно для взаимодействия. Если атрибут open не задан, диалоговое окно не будет видно пользователю. Для отображения диалоговых окон рекомендуется использовать метод .show() или .showModal(), а не атрибут open. Если элемент <dialog> открыт с помощью атрибута open, он является немодальным.

Примечание: Хотя можно переключать немодальные диалоговые окна между открытым и закрытым состояниями, меняя наличие атрибута open, такой подход не рекомендуется. Подробнее см. open.

Описание

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

Управление диалоговыми окнами с помощью JavaScript

Для отображения и закрытия элемента <dialog> можно использовать JavaScript. Метод showModal() позволяет отобразить модальное диалоговое окно, а метод show() — немодальное. Диалоговое окно можно закрыть методом close() или методом dialog при отправке элемента <form>, вложенного в элемент <dialog>. Модальные диалоговые окна также можно закрыть нажатием клавиши Esc.

Модальные диалоговые окна с помощью команд вызывающего элемента

Модальные диалоговые окна можно декларативно открывать и закрывать с помощью HTML-атрибутов commandfor и command из API команд вызывающих элементов. Их можно задавать для элементов <button>.

Атрибут command задаёт команду, которая отправляется при нажатии элемента <button>, а commandfor задаёт id целевого диалогового окна. Для диалоговых окон можно отправлять команды "show-modal", "close" и "request-close".

В приведённом ниже коде показано, как применить атрибуты к элементу <button>, чтобы нажатие на него открывало модальное <dialog> с id "my-dialog".

<button command="show-modal" commandfor="my-dialog">Open dialog</button>

<dialog id="my-dialog">
  <p>This dialog was opened using an invoker command.</p>
  <button commandfor="my-dialog" command="close">Close</button>
</dialog>

Немодальные диалоговые окна с помощью команд всплывающих окон

Немодальные диалоговые окна можно декларативно открывать, закрывать и переключать с помощью HTML-атрибутов popovertarget и popovertargetaction из Popover API. Их можно задавать для элементов <button> и <input>.

Чтобы превратить <dialog> во всплывающее окно, нужно добавить атрибут popover. Затем с помощью popovertarget у кнопки или поля ввода можно указать целевое всплывающее окно, а с помощью popovertargetaction — действие, которое нужно выполнить над ним при нажатии кнопки. Обратите внимание: поскольку диалоговое окно является всплывающим, оно будет немодальным, поэтому его можно закрыть щелчком за его пределами.

В приведённом ниже HTML-коде показано, как применить атрибуты к элементу <button>, чтобы нажатие на него показывало и скрывало модальное <dialog> с id "my-dialog".

<button popovertarget="my-dialog">Open dialog</button>

<dialog id="my-dialog" popover>
  <p>This dialog was opened using a popovertargetaction attribute.</p>
  <button popovertarget="my-dialog" popovertargetaction="hide">Close</button>
</dialog>

Popover API также предоставляет свойства, позволяющие получать и задавать состояние с помощью JavaScript.

Закрытие диалоговых окон

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

Существует множество способов закрыть диалоговое окно:

• Отправить форму внутри элемента <dialog>, установив method="dialog" для элемента <form> (см. пример Использование атрибута open диалогового окна).
• Щёлкнуть за пределами диалогового окна, если включено «закрытие щелчком снаружи» (см. пример HTML-атрибуты Popover API).
• Нажать клавишу Esc в диалоговых окнах, где такая возможность включена (см. пример HTML-атрибуты Popover API).
• Вызвать метод HTMLDialogElement.close() (см. пример модального окна).

Стилизация с помощью CSS

Элемент <dialog> можно выбрать по его имени (как любой другой элемент), а также определить его состояние с помощью псевдоклассов, таких как :modal и :open.

Псевдоэлемент CSS ::backdrop можно использовать для стилизации фона модального диалогового окна, который отображается за элементом <dialog> при открытии диалогового окна методом HTMLDialogElement.showModal(). Например, этот псевдоэлемент можно использовать, чтобы размыть, затемнить или иным образом скрыть неактивное содержимое за модальным диалоговым окном.

Дополнительные примечания

• Элементы HTML <form> можно использовать для закрытия диалогового окна, если у них есть атрибут method="dialog" или если для кнопки отправки формы задано значение formmethod="dialog". Когда элемент <form> внутри <dialog> отправляется методом dialog, диалоговое окно закрывается, состояния элементов управления формы сохраняются, но не отправляются, а свойству returnValue присваивается значение активированной кнопки.
• Атрибут autofocus следует добавить к элементу, с которым пользователь должен взаимодействовать сразу после открытия модального диалогового окна. Если другой элемент не требует более немедленного взаимодействия, рекомендуется добавить autofocus к кнопке закрытия внутри диалогового окна или к самому диалоговому окну, если предполагается, что пользователь щёлкнет или активирует его, чтобы закрыть.
• Не добавляйте свойство tabindex к элементу <dialog>, поскольку он не является интерактивным и не получает фокус. Содержимое диалогового окна, включая расположенную в нём кнопку закрытия, может получать фокус и быть интерактивным.

Доступность

При реализации диалогового окна важно определить наиболее подходящее место для установки фокуса пользователя. При использовании HTMLDialogElement.showModal() для открытия <dialog> фокус устанавливается на первый вложенный элемент, который может получить фокус. Явное указание исходного положения фокуса с помощью атрибута autofocus поможет установить фокус на элемент, который считается наиболее подходящим для конкретного диалогового окна. Если вы не уверены, где следует установить исходный фокус, особенно когда содержимое диалогового окна создаётся динамически при его открытии, лучшим местом для исходного фокуса может быть сам элемент <dialog>.

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

По умолчанию диалоговое окно, вызванное методом showModal(), можно закрыть нажатием клавиши Esc. Немодальное диалоговое окно по умолчанию не закрывается клавишей Esc, и в зависимости от его назначения такое поведение может быть нежелательным. Пользователи клавиатуры ожидают, что клавиша Esc закроет модальные диалоговые окна, поэтому убедитесь, что это поведение реализовано и сохраняется. Если открыто несколько модальных диалоговых окон, нажатие клавиши Esc должно закрывать только последнее показанное окно. При использовании <dialog> это поведение обеспечивает браузер.

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

Браузеры предоставляют элемент <dialog> аналогично пользовательским диалоговым окнам, использующим атрибут ARIA role="dialog". Элементы <dialog>, вызванные методом showModal(), неявно получают aria-modal="true", тогда как элементы <dialog>, вызванные методом show() или отображённые с помощью атрибута open либо путём изменения значения display по умолчанию у элемента <dialog>, предоставляются как [aria-modal="false"]. При реализации модальных диалоговых окон всё, кроме <dialog> и его содержимого, следует сделать неактивным с помощью атрибута inert. При использовании <dialog> вместе с методом HTMLDialogElement.showModal() такое поведение обеспечивает браузер.

Примеры

HTML-атрибуты API команд вызывающих элементов

В этом примере показано, как открывать и закрывать модальное диалоговое окно с помощью HTML-атрибутов commandfor и command из API команд вызывающих элементов.

Сначала объявим элемент <button>, задав атрибуту command значение "show-modal", а атрибуту commandfor — значение id диалогового окна, которое нужно открыть (my-dialog). Затем объявим элемент <dialog>, содержащий кнопку «Закрыть» <button>. Эта кнопка отправляет команду "close" диалоговому окну с тем же идентификатором.

<button command="show-modal" commandfor="my-dialog">Open dialog</button>

<dialog id="my-dialog">
  <p>This dialog was opened using an invoker command.</p>
  <button commandfor="my-dialog" command="close">Close</button>
</dialog>

Результат

Откройте диалоговое окно, нажав кнопку «Открыть диалоговое окно». Его можно закрыть, нажав кнопку «Закрыть» или клавишу Esc.

HTML-атрибуты Popover API

В этом примере показано, как открывать и закрывать немодальное диалоговое окно с помощью HTML-атрибутов popover, popovertarget и popovertargetaction из Popover API.

Элемент <dialog> превращается во всплывающее окно при добавлении атрибута popover. Поскольку мы не указали значение атрибута, используется значение "auto" по умолчанию. Это включает поведение «закрытия щелчком снаружи», позволяя закрыть диалоговое окно щелчком за его пределами или нажатием клавиши Esc. Вместо этого можно задать popover="manual", чтобы отключить такое поведение; в этом случае диалоговое окно придётся закрывать кнопкой «Закрыть».

Обратите внимание, что для элемента <button>, открывающего диалоговое окно, мы не указали атрибут popovertargetaction. В данном случае он не нужен, поскольку его значение по умолчанию — toggle, которое переключает диалоговое окно между открытым и закрытым состояниями при нажатии кнопки.

<button popovertarget="my-dialog">Open dialog</button>

<dialog id="my-dialog" popover>
  <p>This dialog was opened using a popovertargetaction attribute.</p>
  <button popovertarget="my-dialog" popovertargetaction="hide">Close</button>
</dialog>

Результат

Откройте диалоговое окно, нажав кнопку «Открыть диалоговое окно». Его можно закрыть, нажав кнопку «Закрыть» или клавишу Esc. Поскольку окно немодальное, его также можно закрыть щелчком за его пределами.

Использование атрибута open диалогового окна

В этом примере показано, как задать логический атрибут open для элемента <dialog>, чтобы создать немодальное диалоговое окно только на HTML, которое уже открыто при загрузке страницы.

Диалоговое окно можно закрыть нажатием кнопки «ОК», поскольку атрибут method в элементе <form> имеет значение "dialog". В этом случае для закрытия формы JavaScript не требуется.

<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

Результат

Изначально это диалоговое окно открыто и является немодальным из-за наличия атрибута open. После нажатия кнопки «ОК» окно закрывается, и область «Результат» становится пустой.

После закрытия диалогового окна нет способа открыть его снова. Для отображения немодальных диалоговых окон предпочтительно использовать метод HTMLDialogElement.show(). Отображение диалогового окна можно переключать, добавляя или удаляя логический атрибут open, но такой способ не рекомендуется.

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

В этом примере показано модальное диалоговое окно с фоном в виде градиента. Метод .showModal() открывает модальное диалоговое окно при нажатии кнопки «Показать диалоговое окно». Окно можно закрыть нажатием клавиши Esc или вызовом метода close() при нажатии кнопки «Закрыть» внутри диалогового окна.

При открытии диалогового окна браузер по умолчанию переводит фокус на первый элемент внутри него, который может получить фокус. В этом примере к кнопке «Закрыть» применяется атрибут autofocus, поэтому при открытии диалогового окна фокус устанавливается на неё: предполагается, что именно с этим элементом пользователь будет взаимодействовать сразу после открытия.

HTML

<dialog>
  <button autofocus>Close</button>
  <p>This modal dialog has a groovy backdrop!</p>
</dialog>
<button>Show the dialog</button>

CSS

Стилизовать фон диалогового окна можно с помощью псевдоэлемента ::backdrop.

::backdrop {
  background-image: linear-gradient(
    45deg,
    magenta,
    rebeccapurple,
    dodgerblue,
    green
  );
  opacity: 0.75;
}

JavaScript

Диалоговое окно открывается в модальном режиме методом .showModal() и закрывается методами .close() или .requestClose().

const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");

// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
  dialog.showModal();
});

// "Close" button closes the dialog
closeButton.addEventListener("click", () => {
  dialog.close();
});

Результат

При отображении модальное диалоговое окно находится поверх всех остальных диалоговых окон. Всё за пределами модального окна неактивно, а взаимодействие за его пределами блокируется. Обратите внимание: пока диалоговое окно открыто, взаимодействовать с документом невозможно, за исключением самого окна; кнопка «Показать диалоговое окно» почти скрыта практически непрозрачным фоном диалогового окна и неактивна.

Обработка возвращаемого значения диалогового окна

В этом примере показано свойство returnValue элемента <dialog> и способ закрыть модальное диалоговое окно с помощью формы. По умолчанию returnValue — это пустая строка или значение кнопки, отправляющей форму внутри элемента <dialog>, если такая кнопка есть.

В этом примере модальное диалоговое окно открывается при нажатии кнопки «Показать диалоговое окно». В окне находится форма с элементом <select> и двумя элементами <button>, для которых по умолчанию задано значение type="submit". Обработчик события обновляет значение кнопки «Подтвердить» при изменении выбранного пункта. Если для закрытия диалогового окна нажать кнопку «Подтвердить», текущим возвращаемым значением будет значение этой кнопки. Если закрыть окно нажатием кнопки «Отмена», returnValue будет равно cancel.

После закрытия диалогового окна возвращаемое значение отображается под кнопкой «Показать диалоговое окно». Если окно закрыто нажатием клавиши Esc, значение returnValue не обновляется и событие close не возникает, поэтому текст в элементе <output> не обновляется.

HTML

<!-- A modal dialog containing a form -->
<dialog id="favDialog">
  <form>
    <p>
      <label>
        Favorite animal:
        <select>
          <option value="default">Choose…</option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </label>
    </p>
    <div>
      <button value="cancel" formmethod="dialog">Cancel</button>
      <button id="confirmBtn" value="default">Confirm</button>
    </div>
  </form>
</dialog>
<p>
  <button id="showDialog">Show the dialog</button>
</p>
<output></output>

JavaScript

Диалоговое окно открывается с помощью обработчика события на кнопке «Показать диалоговое окно», который вызывает HTMLDialogElement.showModal() при нажатии кнопки.

Диалоговое окно закрывается при нажатии кнопки «Отмена», поскольку элемент <button> содержит атрибут formmethod="dialog". Если для формы задан метод dialog, её состояние сохраняется, но не отправляется, а диалоговое окно закрывается (этот атрибут переопределяет используемый по умолчанию метод GET элемента <form>). Без атрибута action отправка формы методом GET по умолчанию приводит к перезагрузке страницы. Мы используем JavaScript, чтобы предотвратить отправку и закрыть диалоговое окно с помощью методов event.preventDefault() и HTMLDialogElement.close() соответственно.

const showButton = document.getElementById("showDialog");
const favDialog = document.getElementById("favDialog");
const outputBox = document.querySelector("output");
const selectEl = favDialog.querySelector("select");
const confirmBtn = favDialog.querySelector("#confirmBtn");

// "Show the dialog" button opens the <dialog> modally
showButton.addEventListener("click", () => {
  favDialog.showModal();
});

// "Cancel" button closes the dialog without submitting because of [formmethod="dialog"], triggering a close event.
favDialog.addEventListener("close", (e) => {
  outputBox.value =
    favDialog.returnValue === "default"
      ? "No return value."
      : `ReturnValue: ${favDialog.returnValue}.`; // Have to check for "default" rather than empty string
});

// Prevent the "confirm" button from the default behavior of submitting the form, and close the dialog with the `close()` method, which triggers the "close" event.
confirmBtn.addEventListener("click", (event) => {
  event.preventDefault(); // We don't want to submit this fake form
  favDialog.close(selectEl.value); // Have to send the select box value here.
});

Результат

Закрытие диалогового окна с обязательным полем формы

Если форма внутри диалогового окна содержит обязательное поле, пользовательский агент разрешит закрыть окно только после ввода значения в это поле. Чтобы закрыть такое окно, задайте атрибут formnovalidate для кнопки закрытия или вызовите метод close() объекта диалогового окна при нажатии этой кнопки.

<dialog id="dialog">
  <form method="dialog">
    <p>
      <label>
        Favorite animal:
        <input type="text" required />
      </label>
    </p>
    <div>
      <input type="submit" id="normal-close" value="Normal close" />
      <input
        type="submit"
        id="novalidate-close"
        value="Novalidate close"
        formnovalidate />
      <input type="submit" id="js-close" value="JS close" />
    </div>
  </form>
</dialog>
<p>
  <button id="show-dialog">Show the dialog</button>
</p>
<output></output>

JavaScript

const showBtn = document.getElementById("show-dialog");
const dialog = document.getElementById("dialog");
const jsCloseBtn = dialog.querySelector("#js-close");

showBtn.addEventListener("click", () => {
  dialog.showModal();
});

jsCloseBtn.addEventListener("click", (e) => {
  e.preventDefault();
  dialog.close();
});

Результат

Из результата видно, что закрыть диалоговое окно кнопкой Обычное закрытие невозможно. Однако окно можно закрыть, обойдя проверку формы с помощью атрибута formnovalidate на кнопке Отмена. Программно такое окно также закроет dialog.close().

Сравнение поведения при разных значениях closedby

В этом примере показана разница в поведении при разных значениях атрибута closedby.

HTML

Добавим три элемента <button> и три элемента <dialog>. Каждая кнопка будет открывать отдельное диалоговое окно, демонстрирующее поведение одного из трёх значений атрибута closedby — none, closerequest и any. Обратите внимание: каждый элемент <dialog> содержит элемент <button>, который будет использоваться для его закрытия.

<p>Choose a <code>&lt;dialog&gt;</code> type to show:</p>
<div id="controls">
  <button id="none-btn"><code>closedby="none"</code></button>
  <button id="closerequest-btn">
    <code>closedby="closerequest"</code>
  </button>
  <button id="any-btn"><code>closedby="any"</code></button>
</div>

<dialog closedby="none">
  <h2><code>closedby="none"</code></h2>
  <p>
    Only closable using a specific provided mechanism, which in this case is
    pressing the "Close" button below.
  </p>
  <button class="close">Close</button>
</dialog>

<dialog closedby="closerequest">
  <h2><code>closedby="closerequest"</code></h2>
  <p>Closable using the "Close" button or the Esc key.</p>
  <button class="close">Close</button>
</dialog>

<dialog closedby="any">
  <h2><code>closedby="any"</code></h2>
  <p>
    Closable using the "Close" button, the Esc key, or by clicking outside the
    dialog. "Light dismiss" behavior.
  </p>
  <button class="close">Close</button>
</dialog>

JavaScript

Здесь мы назначаем разные переменные для ссылок на основные элементы управления <button>, элементы <dialog> и элементы <button> кнопок «Закрыть» внутри диалоговых окон. Сначала с помощью addEventListener назначим каждой кнопке управления обработчик события click. Функция-обработчик открывает соответствующий элемент <dialog> с помощью showModal(). Затем переберём ссылки на кнопки «Закрыть» <button>, назначив каждой функцию-обработчик события click, которая закрывает соответствующий элемент <dialog> с помощью close().

const noneBtn = document.getElementById("none-btn");
const closerequestBtn = document.getElementById("closerequest-btn");
const anyBtn = document.getElementById("any-btn");

const noneDialog = document.querySelector("[closedby='none']");
const closerequestDialog = document.querySelector("[closedby='closerequest']");
const anyDialog = document.querySelector("[closedby='any']");

const closeBtns = document.querySelectorAll(".close");

noneBtn.addEventListener("click", () => {
  noneDialog.showModal();
});

closerequestBtn.addEventListener("click", () => {
  closerequestDialog.showModal();
});

anyBtn.addEventListener("click", () => {
  anyDialog.showModal();
});

closeBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    btn.parentElement.close();
  });
});

Результат

Результат отображения выглядит следующим образом:

Нажимайте кнопки, чтобы открывать диалоговые окна. Первое можно закрыть только кнопкой «Закрыть». Второе также можно закрыть с помощью действия пользователя, специфичного для устройства, например нажав клавишу Esc. Для третьего доступно полное поведение «закрытия щелчком снаружи», поэтому его также можно закрыть щелчком или касанием за пределами окна.

Анимация диалоговых окон

Когда элементы <dialog> скрыты, для них задаётся значение display: none;, а когда показаны — display: block;. Кроме того, они удаляются из верхнего слоя top layer и дерева доступности или добавляются в них. Поэтому для анимации элементов <dialog> свойство display должно поддерживать анимацию. Поддерживающие это браузеры анимируют display с использованием разновидности дискретного типа анимации. В частности, браузер переключается между none и другим значением display, чтобы анимируемое содержимое отображалось на протяжении всей анимации.

Например:

• При анимации display от none до block (или другого видимого значения display) значение переключится на block в момент 0% длительности анимации, чтобы элемент оставался видимым на протяжении всей анимации.
• При анимации display от block (или другого видимого значения display) до none значение переключится на none в момент 100% длительности анимации, чтобы элемент оставался видимым на протяжении всей анимации.

Переходы для элементов dialog

Для анимации элементов <dialog>s с помощью CSS-переходов необходимы следующие возможности:

@starting-style at-правило

Предоставляет набор начальных значений свойств, заданных для <dialog>, от которых выполняется переход каждый раз при его открытии. Это необходимо, чтобы избежать неожиданного поведения. По умолчанию CSS-переходы происходят только при изменении значения свойства с одного на другое у видимого элемента; они не запускаются при первом обновлении стилей элементов или при изменении типа display с none на другой тип.

display свойство

Добавьте display в список переходов, чтобы <dialog> оставался в состоянии display: block (или в другом видимом значении display, заданном для открытого диалогового окна) на протяжении перехода, гарантируя видимость остальных переходов.

overlay свойство

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

transition-behavior свойство

Установите transition-behavior: allow-discrete для переходов display и overlay (или для сокращённого свойства transition), чтобы включить дискретные переходы для этих двух свойств, которые по умолчанию не поддерживают анимацию.

Вот краткий пример, показывающий, как это может выглядеть.

HTML

HTML содержит элемент <dialog> и кнопку для отображения диалогового окна. Кроме того, элемент <dialog> содержит ещё одну кнопку, чтобы закрыть его.

<dialog id="dialog">
  Content here
  <button class="close">close</button>
</dialog>

<button class="show">Show Modal</button>

CSS

В CSS мы добавляем блок @starting-style, который задаёт начальные стили перехода для свойств opacity и transform, конечные стили перехода для состояния dialog:open и стили по умолчанию для стандартного состояния dialog, к которым происходит возврат после появления <dialog>. Обратите внимание: список transition у <dialog> включает не только эти свойства, но и свойства display и overlay, для каждого из которых задано значение allow-discrete.

Мы также задаём начальное значение стиля для свойства background-color у ::backdrop, который появляется позади <dialog> при его открытии, чтобы создать приятную анимацию затемнения. Селектор dialog:open::backdrop выбирает только подложки элементов <dialog>, когда диалоговое окно открыто.

/* Open state of the dialog  */
dialog:open {
  opacity: 1;
  transform: scaleY(1);
}

/* Closed state of the dialog   */
dialog {
  opacity: 0;
  transform: scaleY(0);
  transition:
    opacity 0.7s ease-out,
    transform 0.7s ease-out,
    overlay 0.7s ease-out allow-discrete,
    display 0.7s ease-out allow-discrete;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

/* Before open state  */
/* Needs to be after the previous dialog:open rule to take effect,
    as the specificity is the same */
@starting-style {
  dialog:open {
    opacity: 0;
    transform: scaleY(0);
  }
}

/* Transition the :backdrop when the dialog modal is promoted to the top layer */
dialog::backdrop {
  background-color: transparent;
  transition:
    display 0.7s allow-discrete,
    overlay 0.7s allow-discrete,
    background-color 0.7s;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

dialog:open::backdrop {
  background-color: rgb(0 0 0 / 25%);
}

/* This starting-style rule cannot be nested inside the above selector
because the nesting selector cannot represent pseudo-elements. */

@starting-style {
  dialog:open::backdrop {
    background-color: transparent;
  }
}

JavaScript

В JavaScript к кнопкам открытия и закрытия добавляются обработчики событий, которые открывают и закрывают <dialog> при нажатии:

const dialogElem = document.getElementById("dialog");
const showBtn = document.querySelector(".show");
const closeBtn = document.querySelector(".close");

showBtn.addEventListener("click", () => {
  dialogElem.showModal();
});

closeBtn.addEventListener("click", () => {
  dialogElem.close();
});

Результат

Код отображается следующим образом:

Покадровые анимации диалогового окна

При анимации <dialog> с помощью покадровых CSS-анимаций следует учитывать несколько отличий от переходов:

• Не нужно задавать @starting-style.
• Включите значение display в ключевой кадр; оно будет значением display на протяжении всей анимации или до тех пор, пока не встретится другое значение display, отличное от none.
• Не нужно явно включать дискретные анимации; в ключевых кадрах нет аналога allow-discrete.
• Также не нужно задавать overlay в ключевых кадрах; анимация display обеспечивает переход <dialog> из видимого состояния в скрытое.

Рассмотрим пример, чтобы увидеть, как это выглядит.

HTML

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

<dialog id="dialog">
  Content here
  <button class="close">close</button>
</dialog>

<button class="show">Show Modal</button>

CSS

CSS задаёт ключевые кадры для анимации между закрытым и видимым состояниями <dialog>, а также анимацию появления подложки <dialog>. Анимации <dialog> включают анимацию display, чтобы видимые эффекты анимации сохранялись на протяжении всего времени. Обратите внимание, что анимировать исчезновение подложки невозможно: подложка немедленно удаляется из DOM при закрытии <dialog>, поэтому анимировать нечего.

dialog {
  animation: fade-out 0.7s ease-out;
}

dialog:open {
  animation: fade-in 0.7s ease-out;
}

dialog:open::backdrop {
  background-color: black;
  animation: backdrop-fade-in 0.7s ease-out forwards;
}

/* Animation keyframes */

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: scaleY(0);
    display: none;
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
    display: block;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
    transform: scaleY(1);
    display: block;
  }

  100% {
    opacity: 0;
    transform: scaleY(0);
    display: none;
  }
}

@keyframes backdrop-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.25;
  }
}

body,
button {
  font-family: system-ui;
}

JavaScript

Наконец, в JavaScript к кнопкам добавляются обработчики событий, позволяющие отображать и закрывать <dialog>:

const dialogElem = document.getElementById("dialog");
const showBtn = document.querySelector(".show");
const closeBtn = document.querySelector(".close");

showBtn.addEventListener("click", () => {
  dialogElem.showModal();
});

closeBtn.addEventListener("click", () => {
  dialogElem.close();
});

Результат

Код отображается следующим образом:

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• HTMLDialogElement интерфейс
• close событие интерфейса HTMLDialogElement
• cancel событие интерфейса HTMLDialogElement
• open свойство интерфейса HTMLDialogElement
• inert глобальный атрибут HTML-элементов
• ::backdrop псевдоэлемент CSS
• Веб-формы в разделе «Обучение»