Псевдокласс CSS :popover-open

Определение и использование

CSS :popover-open Псевдоклассы используются для выбора и установки стиля любого элемента, который находится в состоянии отображения всплывающего окна.

По умолчанию, всплывающее окно отображается в центре видимой области.

Базовый стиль всплывающего окна в браузере:

[popover] {
position: fixed;
inset: 0;
width: fit-content;
height: fit-content;
margin: auto;
border: solid;
padding: 0.25em;
overflow: auto;
color: CanvasText;
background-color: Canvas;
}

Чтобы заменить defaultManager, можно использовать :popover-open Псевдоклассы.

Пример

Выберите и установите стиль любого элемента, который находится в состоянии отображения всплывающего окна:

:popover-open {
  width: 150px;
  height: 150px;
  position: absolute;
  inset: unset;
  bottom: 25px;
  left: 25px;
  margin: 0;
  color: maroon;
  background-color: orange;
  font-size: 25px;
}

Попробуйте сами

CSS грамматика

:popover-open {
  css declarations;
}

Технические детали

Версия: CSS4

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

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот псевдокласс.

Chrome Edge Firefox Safari Opera
114 114 125 17 100

См. также:

См. также:HTML popover свойство