Ну что, скоро заживём с новым Popover API? В Chrome 114 появилась поддержка Popover API. Новое API упрощает создание поповеров (всплывающих окон). А как упрощает? Разработчику не придётся писать JavaScript для решения таких задач, как:

  • light-dismiss — закрытие при клике по области вне поповера;
  • управление фокусом — после открытия фокус автоматически переключается на элементы внутри поповера;
  • закрытие по нажатию клавиши Escape.

Также не придётся вспоминать нюансы работы с z-index (а кто их забыл?). Всплывающие окна будут отображаться на отдельном слое, поверх контента.

Маленький пример кода из блога Chrome:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Здесь задействовано два новых атрибута: popovertarget и popover.

Посмотреть примеры и почитать больше информации можно в блоге Chrome. Кстати, в Safari Developer Preview поддержка тоже появилась.