Это происходит! Одна из функций, которая меня больше всего впечатляет, только что появилась во всех современных браузерах и официально стала частью Baseline 2024. И эта функция — Popover API . Popover предоставляет множество замечательных примитивов и возможностей для разработчиков для создания многоуровневых интерфейсов, таких как всплывающие подсказки, меню, обучающие пользовательские интерфейсы и многое другое.
Некоторые краткие сведения о возможностях всплывающих окон включают в себя:
- Продвижение на верхний слой. Поповеры появятся в верхнем слое над остальной частью страницы, поэтому вам не придется экспериментировать с
z-index
. - Функция отключения освещения. Щелчок за пределами области всплывающего окна закроет всплывающее окно и вернет фокус.
- Управление фокусом по умолчанию. Открытие всплывающего окна приводит к тому, что следующая табуляция останавливается внутри всплывающего окна.
- Доступные привязки клавиатуры. Нажатие клавиши
esc
или двойное переключение закроет всплывающее окно и вернет фокус. - Доступные привязки компонентов. Семантическое соединение элемента popover с триггером popover.
Создание поповеров
Создать поповеры довольно просто. Чтобы использовать значения по умолчанию, все, что вам нужно, — это button
для запуска всплывающего окна и элемент для запуска.
- Сначала установите атрибут
popover
для элемента, который будет всплывающим окном. - Затем добавьте уникальный
id
элемента popover. - Наконец, чтобы подключить кнопку к всплывающему поповеру, установите для
popovertarget
кнопки значениеid
элемента всплывающего окна.
Это показано в следующем коде:
<button popovertarget="my-popover">Open Popover</button>
<div id="my-popover" popover>
<p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>
Чтобы иметь более детальный контроль над всплывающими окнами, вы можете явно указать типы всплывающих окон. Например, использование атрибута popover
без значения аналогично popover="auto"
. Значение auto
включает режим отключения света и автоматически закрывает другие всплывающие окна. Используйте popover="manual"
, и вам нужно будет добавить кнопку закрытия. Поповеры вручную не закрывают другие всплывающие окна и не позволяют пользователям закрывать всплывающие окна, щелкнув их в пользовательском интерфейсе. Вы создаете всплывающее окно вручную, используя следующее:
<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>
<div id="my-popover" popover=manual>
<p>I am a popover with more information. Hit the close button or toggle to close me.<p>
<button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
<span class="sr-only">Close</span>
</button>
</div>
Поповер и модальный диалог
Вы можете задаться вопросом, нужен ли вам всплывающий элемент, когда диалог существует, и ответ: возможно, нет.
Важно отметить, что атрибут popover сам по себе не обеспечивает семантику. И хотя теперь вы можете создавать модальные диалоговые возможности с помощью всплывающего окна, между ними есть несколько ключевых отличий:
Модальный элемент <dialog>
- Открыт с помощью
dialog.showModal()
. - Закрывается с помощью
dialog.close()
. - Делает остальную часть страницы инертной.
- Не поддерживает поведение отключения освещения.
- Вы можете стилизовать открытое состояние с помощью атрибута
[open]
. - Семантически представляет интерактивный компонент, который блокирует взаимодействие с остальной частью страницы.
Атрибут [popover]
- Может быть открыт с помощью декларативного средства вызова (
popovertarget
). - Закрывается с помощью
popovertarget
(автоматическое всплывающее окно) илиpopovertargetaction=hide
(всплывающее окно вручную). - Не делает остальную часть страницы инертной.
- Поддерживает поведение отключения света.
- Вы можете стилизовать открытое состояние с помощью псевдокласса
:popover-open
. - Никакой внутренней семантики.
Заключение и дальнейшее чтение
popover
привносит в платформу множество интересных функций. Чтобы узнать больше об этом API, в том числе о доступности функции и документации по набору функций, рекомендуем прочитать следующие материалы: