Всплывающее окно и диалог

Всплывающее окно — это любой элемент с атрибутом popover , который полезен для широкого спектра интерактивных шаблонов, включая подсказки, оповещения, тосты и многое другое.

<div id="my-popover" popover>My popover content</div>

Атрибут popover по умолчанию скрывает элемент, и вам необходимо предоставить пользователям возможность его открыть. Хотя всплывающие окна размещаются в верхнем слое, над остальным контентом, они не являются модальными. Это означает, что вы по-прежнему можете взаимодействовать с контентом за пределами всплывающего окна.

Управление поповерами

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

Декларативно

Всплывающими окнами можно управлять полностью в HTML, без необходимости использования JavaScript, используя кнопки (и поля ввода с типом button ) и атрибут popovertarget .

Вспомогательное меню в предыдущем фрагменте кода имеет id my-popover , и вы можете использовать его для ссылки на вспомогательное меню.

<button popovertarget="my-popover">Toggle</button>

Вы также можете указать, должна ли кнопка открывать или закрывать всплывающее окно, используя popovertargetaction="show" и popovertargetaction="hide" .

С JavaScript

Вы также можете управлять всплывающим окном с помощью JavaScript, что полезно, когда вы хотите, чтобы всплывающее окно отображалось не только при нажатии кнопки пользователем. Для этого необходимо получить элемент popover и вызвать методы showPopover() , hidePopover() или togglePopover() .

Типы поповеров

При добавлении поповера на сайт необходимо учитывать множество факторов. Как он открывается? Как пользователи могут его закрыть? Что происходит с другими открытыми поповерами? Существует три типа поповеров, и вы можете выбрать тот, который обеспечит поведение и взаимодействие, необходимые для вашего варианта использования.

Автоматические всплывающие окна

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

<div id="popover" popover>My popover</div>

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

Ручные поповеры

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

<div id="popover" popover="manual">My popover</div>

Этот поповер закроется только тогда, когда вы его закроете намеренно — его нельзя закрыть с помощью кнопки «Открыть» или клавиши Esc . Однако он позволяет открывать несколько поповеров одновременно.

Подсказки-всплывающие подсказки

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

<div id="popover" popover="hint">My popover</div>

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

Размещение вашего рекламного объявления

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

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

Позиционирование якоря состоит из двух этапов: определение якорного элемента и размещение элемента относительно этого якоря. Вспомогательные элементы могут выполнить первый этап, установив неявный якорь. При открытии поповера с помощью <button popovertarget> кнопка становится неявным якорем. Если вы открываете поповер с помощью JavaScript, вы можете установить неявный якорь с помощью параметра source .

По умолчанию информер центрируется с помощью margin: auto . Чтобы использовать позиционирование привязки, вам, вероятно, потребуется переопределить это, установив margin: unset .

Стили и анимации

Псевдоэлемент ::backdrop

Всплывающие окна открываются в верхнем слое, поверх всего остального контента на странице. Под всплывающим окном находится псевдоэлемент ::backdrop , который можно стилизовать.

Важно отметить, что содержимое за пределами всплывающего окна не является инертным — вы по-прежнему можете нажимать кнопки и использовать клавиатуру для навигации по странице. Не следует перекрывать содержимое страницы, например, применяя эффект сильного размытия или устанавливая непрозрачный фон.

Псевдокласс :popover-open

Допустим, вы хотите оформить содержимое информера с помощью CSS-сеток. Вы добавляете [popover]{ display: grid } , и все ваши информационные элементы становятся видимыми. Это происходит потому, что информационные элементы скрыты с помощью display: none . Вы можете использовать псевдокласс :popover-open чтобы применять стили только к открытому информационному элементу.

[popover]{
/* Don't do this! All popovers will be visible.  */
  display: grid;
}

[popover]:popover-open {
/*  This will only affect open popovers. */
  display: grid;
}

:popover-open также полезен при анимации всплывающего окна.

Анимированные всплывающие окна

Анимация поповера состоит из 3 этапов:

1. @starting-style {popover:popover-open { } } — начальные стили для всплывающего окна, как только оно становится видимым. Обратите внимание, что это необходимо определить в таблице стилей после пункта 2.
2. popover:popover-open { } — стили для всплывающего окна, когда оно открыто.
3. popover { } — стили, к которым переходит popover при закрытии.

Вспомогательное окно скрывается с помощью display: none , когда оно не открыто. Для анимации этого эффекта необходимо установить transition-behavior: allow-discrete , а также добавить display в список свойств transition .

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

Взаимодействие между поповерами

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

Вложенные всплывающие окна

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

Если вы открываете всплывающее окно с подсказкой из всплывающего окна с подсказкой или автоматическое всплывающее окно из автоматического всплывающего окна, всплывающие окна складываются в стопку. Закрытие всплывающего окна также закрывает все всплывающие окна, расположенные после него. Это также работает с функцией закрытия окна: если вы щёлкните по всплывающему окну, все всплывающие окна, расположенные после него, закроются, но предыдущие останутся открытыми.

Всплывающее окно добавляется в стек, если его исходный элемент находится внутри всплывающего окна. Исходный элемент устанавливается автоматически при использовании popovertarget для кнопки или с помощью JavaScript, путём указания параметра source при вызове .showPopover({source}) или .togglePopover({source}) .

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

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

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

Закрытие других типов поповеров

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

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

При открытии меню нажатием кнопки подсказка закрывается по двум причинам. Во-первых, щелчок за пределами подсказки вызывает закрытие индикатора. Во-вторых, открытие автоматического всплывающего окна закрывает все открытые всплывающие окна подсказок. Это происходит, потому что пользователь изменил свой фокус, и временное содержимое всплывающего окна подсказки больше не актуально. Это означает, что при вызове showPopover() для автоматического всплывающего окна все открытые всплывающие окна подсказок будут закрыты.

Выпадающие меню — это автоматические всплывающие окна. В выпадающих меню предполагается, что одновременно открыто только одно окно, и открытие одного из них закрывает другое. Как вы видели, открытие автоматического всплывающего окна также закрывает все открытые всплывающие окна с подсказками.

Однако даже при открытом раскрывающемся меню вам всё равно может потребоваться просмотреть содержимое не связанной с ним подсказки. Отображение подсказки не закрывает автоматические всплывающие окна.

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

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

Проверьте свое понимание