Поповеры повсюду в сети. Вы можете увидеть их в меню, переключателях и диалоговых окнах, которые могут проявляться в настройках учетной записи, виджетах раскрытия и предварительном просмотре карточек продуктов. Несмотря на то, насколько распространены эти компоненты, их создание в браузерах по-прежнему остается на удивление громоздким. Вам необходимо добавить сценарии для управления фокусом, состояниями открытия и закрытия, доступные привязки к компонентам, привязки клавиатуры для входа и выхода из интерфейса, и это все еще до того, как вы начнете создавать полезную, уникальную базовую функциональность вашего всплывающего окна.
Чтобы решить эту проблему, в браузеры поступает новый набор декларативных HTML API для создания всплывающих окон, начиная с API popover
в Chromium 114.
Атрибут popover
Вместо того, чтобы управлять всей сложностью самостоятельно, вы можете позволить браузеру справиться с ней с помощью атрибута popover
и последующего набора функций. Поддержка всплывающих окон HTML:
- Продвижение на верхний слой. Поповеры появятся на отдельном слое над остальной частью страницы, поэтому вам не придется возиться с z-index.
- Функция отключения освещения. Щелчок за пределами области всплывающего окна закроет всплывающее окно и вернет фокус.
- Управление фокусом по умолчанию. Открытие всплывающего окна приводит к тому, что следующая табуляция останавливается внутри всплывающего окна.
- Доступные привязки клавиатуры. Нажатие клавиши
esc
закроет всплывающее окно и вернет фокус. - Доступные привязки компонентов. Семантическое соединение элемента popover с триггером popover.
Теперь вы можете создавать всплывающие окна со всеми этими функциями без использования JavaScript. Базовый поповер требует трёх вещей:
- Атрибут
popover
для элемента, содержащего всплывающее окно. -
id
элемента, содержащего всплывающее окно. -
popovertarget
со значениемid
всплывающего окна в элементе, который открывает всплывающее окно.
<button popovertarget="my-popover"> Open Popover </button>
<div id="my-popover" popover>
<p>I am a popover with more information.</p>
</div>
Теперь у вас есть полнофункциональный базовый поповер.
Это всплывающее окно можно использовать для передачи дополнительной информации или в качестве виджета раскрытия информации.
Значения по умолчанию и переопределения
По умолчанию, как и в предыдущем фрагменте кода, настройка всплывающего окна с помощью popovertarget
означает, что кнопка или элемент, открывающий всплывающее окно, будет переключать его открытие и закрытие. Однако вы также можете создавать явные всплывающие окна, используя popovertargetaction
. Это переопределяет действие переключения по умолчанию. Опции popovertargetaction
включают в себя:
popovertargetaction="show"
: показывает всплывающее окно. popovertargetaction="hide"
: скрывает всплывающее окно.
Используя popovertargetaction="hide"
, вы можете создать кнопку «закрыть» внутри всплывающего окна, как показано в следующем фрагменте:
<button popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
<span class="sr-only">Close</span>
</button>
Автоматические и ручные поповеры
Использование атрибута popover
на самом деле является ярлыком для popover="auto"
. При открытии popover
по умолчанию принудительно закроет другие автоматические всплывающие окна, за исключением всплывающих окон-предков. Его можно закрыть с помощью кнопки Light-Dismiss или кнопки закрытия.
С другой стороны, установка popover=manual
создает другой тип всплывающего окна: всплывающее окно вручную. Они не закрывают принудительно элементы любого другого типа и не закрываются с помощью отключения света. Вы должны закрыть их с помощью таймера или явного действия закрытия. Типы всплывающих окон, подходящие для popover=manual
— это элементы, которые появляются и исчезают, но не должны влиять на остальную часть страницы, например всплывающее уведомление.
Если вы изучите приведенную выше демонстрацию, вы увидите, что щелчок за пределами области всплывающего окна не приводит к его закрытию. Кроме того, если бы были открыты другие всплывающие окна, они бы не закрылись.
Чтобы просмотреть различия:
Поповеры с popover=auto
:
- При открытии принудительно закройте другие всплывающие окна.
- Могу свет-уволить.
Поповеры с popover=manual
:
- Не закрывайте принудительно элементы других типов.
- Не зажигайте-увольняйте. Закройте их, используя переключатель или действие закрытия.
Стилизация всплывающих окон
Итак, вы узнали об основных всплывающих окнах в HTML. Но есть и несколько приятных стилевых возможностей, которые есть в popover
. Одним из них является возможность стилизовать ::backdrop
.
В auto
поповерах это слой непосредственно под верхним слоем (где находится поповер), который находится над остальной частью страницы. В следующем примере элементу ::backdrop
присвоен полупрозрачный цвет:
#size-guide::backdrop {
background: rgb(190 190 190 / 50%);
}
Разница между popover
и dialog
Важно отметить, что атрибут popover
сам по себе не обеспечивает семантику. И хотя теперь вы можете создавать модальные диалоговые возможности с помощью popover="auto"
, между ними есть несколько ключевых отличий:
Элемент dialog
, открытый с помощью dialog.showModal
(модальный диалог), представляет собой интерфейс, требующий явного взаимодействия с пользователем для закрытия модального окна. popover
поддерживает функцию Light-Dismiss. Модальный dialog
этого не делает. Модальный диалог делает остальную часть страницы инертной . popover
этого не делает.
Приведенная выше демонстрация представляет собой семантический диалог с всплывающим окном. Это означает, что остальная часть страницы не является инертной и что всплывающее диалоговое окно имеет поведение легкого закрытия. Вы можете создать это диалоговое окно с поведением всплывающего окна, используя следующий код:
<button popovertarget="candle-01">
Quick Shop
</button>
<dialog popover id="candle-01">
<button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
<div class="product-preview-container">
...
</div>
</dialog>
Вскоре
Интерактивный вход и выход
Возможность анимировать отдельные свойства, включая анимацию display: none
и анимацию верхнего слоя и обратно, пока недоступна в браузерах. Однако они запланированы для следующей версии Chromium, которая выйдет сразу после этого выпуска.
Благодаря возможности анимировать отдельные свойства и использованию :popover-open
и @starting-style
вы сможете настраивать стили до и после изменения, чтобы обеспечить плавные переходы при открытии и закрытии всплывающих окон. Возьмите предыдущий пример. Анимация появления и исчезновения выглядит намного плавнее и обеспечивает более плавный пользовательский интерфейс:
Расположение якоря
Поповеры хороши, когда вы хотите разместить предупреждение, модальное окно или уведомление в зависимости от области просмотра. Но поповеры также полезны для меню, всплывающих подсказок и других элементов, которые необходимо расположить относительно других элементов. Здесь на помощь приходит привязка CSS.
В следующей демонстрации радиального меню используется API-интерфейс popover вместе с позиционированием привязки CSS , чтобы гарантировать, что #menu-items
всплывающего окна всегда привязаны к триггеру переключения — кнопке #menu-toggle
.
Настройка якорей аналогична настройке поповеров:
<button id="menu-toggle" popovertarget="menu-items">
Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
<li class="item">...</li>
<li class="item">...</li>
</ul>
Вы устанавливаете привязку, присваивая ей id
(в этом примере #menu-toggle
), а затем используете anchor="menu-toggle"
для соединения двух элементов. Теперь вы можете использовать anchor()
для стилизации всплывающего окна. Центральное всплывающее меню, привязанное к базовой линии переключателя привязки, может быть оформлено следующим образом:
#menu-items {
bottom: anchor(bottom);
left: anchor(center);
translate: -50% 0;
}
Теперь у вас есть полнофункциональное всплывающее меню, привязанное к кнопке переключения и имеющее все встроенные функции всплывающего окна, JavaScript не требуется!
Заключение
API popover — это первый шаг в серии новых возможностей, которые по умолчанию упрощают создание веб-приложений и делают их более доступными. Мне очень интересно видеть, как вы используете поповеры!