API всплывающих окон

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

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

• модальными, что означает, что пока всплывающее окно отображается, остальная часть страницы неактивна до тех пор, пока не будет выполнено какое-либо действие над всплывающим окном (например, сделан важный выбор).
• немодальными, что означает, что остальная часть страницы может быть взаимодействующей, пока всплывающее окно отображается.

Всплывающие окна, созданные с помощью API всплывающих окон, всегда немодальные. Если вы хотите создать модальное всплывающее окно, элемент <dialog> является правильным выбором. Между этими двумя типами существует значительное перекрытие — например, вы можете создать всплывающее окно, которое сохраняется, но управляется декларативным HTML. Вы можете преобразовать элемент <dialog> во всплывающее окно (<dialog popover> является допустимым), если вы хотите объединить управление всплывающим окном со смыслом диалогового окна.

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

Вы можете создавать всплывающие окна двумя способами:

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

  <button popovertarget="mypopover">Toggle the popover</button>
  <div id="mypopover" popover>Popover content</div>
  

• С помощью JavaScript-API. Например, HTMLElement.togglePopover() можно использовать для переключения всплывающего окна между отображённым и скрытым состояниями.

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

См. Использование API всплывающих окон для подробного руководства по использованию этого API.

popover

Глобальный атрибут, который превращает элемент в элемент всплывающего окна; принимает состояние всплывающего окна ("auto" или "manual") в качестве своего значения.

popovertarget

Преобразует элемент <button> или <input> в кнопку управления всплывающим окном; принимает идентификатор элемента всплывающего окна для управления в качестве своего значения.

popovertargetaction

Указывает действие, которое должно быть выполнено ("hide", "show", или "toggle") над элементом всплывающего окна, управляемым кнопкой управления <button> или <input>.

::backdrop

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

:popover-open

Псевдокласс :popover-open соответствует элементу всплывающего окна только тогда, когда он находится в состоянии отображения — он может использоваться для стилизации элементов всплывающего окна, когда они отображаются.

ToggleEvent

Представляет собой событие, уведомляющее пользователя о том, когда состояние элемента всплывающего окна переключается между отображением и скрытием. Это объект события для событий beforetoggle и toggle, которые срабатывают во всплывающих окнах при изменении их состояния.

HTMLElement.popover

Получает и устанавливает состояние всплывающего окна элемента с помощью JavaScript ("auto" или "manual") и может использоваться для обнаружения функций. Отражает значение глобального атрибута HTML popover.

HTMLButtonElement.popoverTargetElement и HTMLInputElement.popoverTargetElement

Получает и устанавливает элемент всплывающего окна, которым управляет кнопка управления. JavaScript-аналог атрибута HTML popovertarget.

HTMLButtonElement.popoverTargetAction и HTMLInputElement.popoverTargetAction

Получает и устанавливает действие, которое должно быть выполнено ("hide", "show", или "toggle") над элементом всплывающего окна, которым управляет кнопка управления. Отражает значение атрибута HTML popovertargetaction.

HTMLElement.hidePopover()

Скрывает элемент всплывающего окна, удаляя его с верхнего уровня и применяя стиль display: none.

HTMLElement.showPopover()

Отображает элемент всплывающего окна, добавив его на верхний уровень.

HTMLElement.togglePopover()

Переключает состояние элемента всплывающего окна между отображением и скрытием.

HTMLElement.beforetoggle событие

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

HTMLElement.toggle событие

Срабатывает непосредственно после изменения состояния элемента всплывающего окна между отображением и скрытием, или наоборот.

См. нашу страницу примеров API всплывающих окон для доступа к полному набору примеров всплывающих окон MDN.

• popover Глобальный атрибут HTML
• popovertarget Атрибут HTML
• popovertargetaction Атрибут HTML
• ::backdrop Псевдоэлемент CSS
• :popover-open Псевдокласс CSS