Popover - это относительно новый HTML-атрибут, позволяющий создавать всплывающие окна на основе простых элементов в вашей HTML-разметке.
Определение и использование
Атрибут popoverопределяет элемент, как всплывающий, что означает, что при его вызове он будет размещен поверх содержимого, не мешая положению других элементов HTML. Кроме того, элемент, имеющий атрибут popover, будет невидимым, пока он не будет вызван другим элементом.
В разметке элемента с атрибутом popover вы можете указать один абзац (<p>), заголовок (h1 ... h6) или даже цитату (blockquote), а также целый блок (чаще всего, div) c набором других HTML-элементов внутри. popover - это глобальный атрибут. Его можно добавлять элементам наряду с атрибутами id или style, например.
Для отображения всплывающего окна вам понадобится элемент <button> или <input type="button">.
Важно: для показа всплывающего окна/подсказки кнопка должна иметь атрибут popovertarget, в значении которого указан идентификатор элемента с атрибутом popover. Для закрытия всплывающего окна, кнопка внутри него должна также иметь атрибуты popovertarget и popovertargetaction="hide".
Немного запутано, да? На самом деле, ничего сложного. Разметка такова:
| 1 2 3 4 5 6 7 8 9 10 | <div id="the-popover" popover> <h3>Заголовок</h3> <p>Любой текст, который вам необходимо добавить.</p> <button popovertarget="the-popover" popovertargetaction="hide"> Закрыть </button> </div> <button popovertarget="the-popover"> Открыть элемент с popover </button> |
Пример вживую:
Заголовок
Любой текст, который вам необходимо добавить.
Всплывающее окно вы найдете слева вверху. Смотрится не очень, не так ли?
Закрываем всплывающее окно с атрибутом popover
Для того, чтобы закрыть всплывающее окно с атрибутом popover, можно:
- кликнуть по кнопке, которая его открыла (если она видна, разумеется);
- сделать клик за пределами элемента. При этом фокус вернётся на последний активный элемент на странице;
- нажать на на клавишу Esc;
- добавить кнопку внутри этого элемента с атрибутами
popovertargetв виде егоidиpopovertargetaction="hide"илиpopovertargetaction="toggle".
Вы также можете добавить к кнопке, которая открывает всплывающее окно с атрибутом popover атрибут popovertargetaction="show". Тогда закрыть этот элемент кликом на открывшей его кнопке не получится. Нужно обязательно вставлять в поповер отдельную кнопку с popovertargetaction="hide" или popovertargetaction="toggle".
Стилизация элемента с атрибутом popover
Стили по умолчанию
Элемент с атрибутом popover будет размещен поверх всего остального контента. Это один из элементов, который образует так называемый overlay.
При нажатии на элемент, который имеет атрибут popovertarget, элемент с popover будет переключаться между отображением и скрытием.
По умолчанию для любого элемента, имеющего атрибут popover, стили (браузер Chrome) будут такими:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | [popover] { position: fixed; width: fit-content; height: fit-content; color: canvastext; background-color: canvas; inset: 0px; margin: auto; border-width: initial; border-style: solid; border-color: initial; border-image: initial; padding: 0.25em; overflow: auto; } |
Соответственно, эти стили можно подкорректировать, и получить элемент, который будет смотреться уже намного приятнее.
CSS для элемента с атрибутом popover
Вот, что получается при использовании стилей для ограничения длины, цвет рамки и фона:
See the Pen The popover Attribute by Elen (@ambassador) on CodePen.
Отображение возможности оплаты в рассрочку в примере ниже уже использует анимацию при появлении.
See the Pen Dialog vs Popover by Elen (@ambassador) on CodePen.
Еще один пример, в котором используются элемент <dialog> и атрибут popover для создания всплывающих окон с похожей стилизацией.
See the Pen Opacity/Visibility transitions doesn't work with dialogs and popovers by Rahul (@_rahul) on CodePen.
Пример со стилизацией в виде блока с треугольником.
See the Pen HTML Popover Attribute by Elen (@ambassador) on CodePen.
Используем псевдоэлемент ::backdrop и псевдокласса :popover-open для стилизации
Подобно элементу dialog, атрибут popover использует псевдоэлемент ::backdrop и псевдокласс :popover-open для стилизации.
::backdrop- Псевдоэлемент
::backdropпредставляет собой полноэкранный элемент, размещаемый непосредственно за элементами всплывающего окна, позволяющий при желании добавлять эффекты к содержимому страницы за всплывающим окном(ами) (например, размывать его). :popover-open- Псевдокласс
:popover-openсоответствует элементу всплывающего окна только тогда, когда он находится в состоянии отображения — его можно использовать для стилизации элементов всплывающего окна, когда они отображаются.
Например, для фона, который определяется псевдоэлементом ::backdrop, мы можем назначить градиент и размытие, а для появления самого окна - анимацию для псевдокласса :popover-open.
Пример стилизации.
See the Pen The popover Attribute by Elen (@ambassador) on CodePen.
Методы JavaScript для управления всплывающим окном
Для того чтобы иметь возможность управлять элементами с атрибутом popover с помощью JavaScript, можно использовать такие методы:
| Метод | Что делает |
|---|---|
showPopover() | Показывает элемент всплывающего окна, добавляя его в верхний слой. |
hidePopover() | Скрывает элемент всплывающего окна, удаляя его из верхнего слоя и применяя к нему стиль display: none. |
togglePopover() | Переключает элемент всплывающего окна между отображаемым и скрытым состояниями. То есть делает работу предыдущих 2-х методов, определяя, скрыт элемент или нет. |
Пример замены клика по кнопке на наведение мыши.
See the Pen Attribute popover by Elen (@ambassador) on CodePen.
Также для элемента с атрибутом popover можно обработать 2 события:
| Метод | Что делает |
|---|---|
beforetoggle | Срабатывает непосредственно перед тем, как состояние элемента всплывающего окна изменится с отображения на скрытие или наоборот. Может использоваться для предотвращения открытия всплывающего окна или для обновления других элементов, которые должны активироваться состоянием всплывающего окна. |
toggle | Срабатывает сразу после того, как состояние элемента всплывающего окна меняется с отображаемого на скрытое или наоборот. |
Заключение
Надеюсь, вы сумеете использовать с пользой атрибут popover для создания подсказок или всплывающих окон. В любом случае, помимо JavaScript-кода, который ранее использовался для этих целей, вы можете теперь применить HTML-код с CSS-стилизацией, что уже расширяет возможности верстки.
