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