Popover API появился в базовой версии

Уна Кравец

Это происходит! Одна из функций, которая меня больше всего впечатляет, только что появилась во всех современных браузерах и официально стала частью Baseline 2024. И эта функция — Popover API . Popover предоставляет множество замечательных примитивов и возможностей для разработчиков для создания многоуровневых интерфейсов, таких как всплывающие подсказки, меню, обучающие пользовательские интерфейсы и многое другое.

Поддержка браузера

  • Хром: 114.
  • Край: 114.
  • Фаерфокс: 125.
  • Сафари: 17.

Источник

Некоторые краткие сведения о возможностях всплывающих окон включают в себя:

  • Продвижение на верхний слой. Поповеры появятся в верхнем слое над остальной частью страницы, поэтому вам не придется экспериментировать с 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 без значения аналогично 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, в том числе о доступности функции и документации по набору функций, рекомендуем прочитать следующие материалы: