Атрибут popover

Атрибут popover указывает, что элемент, к которому добавлен этот атрибут, является всплывающим окном. Исходно у такого окна установлено стилевое свойство display со значением none, поэтому оно не отображается на веб-странице. Чтобы сделать окно видимым, к любой кнопке <button> добавляется атрибут popovertarget с именем идентификатора, заданного у элемента с атрибутом popover.

В примере ниже у элемента <div> задан атрибут id с идентификатором alert и атрибут popover. С этим <div> связана кнопка через атрибут popovertarget с тем же значением alert.

<div id="alert" popover>Всплывающее окно</div>
<button popovertarget="alert">Отобразить</button>

При щелчке по кнопке отображается и связанное с кнопкой всплывающее окно (рис. 1).

Вид всплывающего окна

Рис. 1. Вид всплывающего окна

Такое окно содержит белый фон и толстую чёрную рамку, выводится в центре видимой области браузера, размеры окна подстраиваются под его содержимое.

Взаимодействие со всплывающим окном различается в разных браузерах. Chrome, Opera, Safari, Edge и другие браузеры на движке Webkit закрывают окно при нажатии на клавишу Esc или при щелчке по любому месту веб-страницы за пределами окна. Браузер Firefox закрывает окно только при щелчке по связанной с ним кнопке.

Для управления стилем окна можно использовать селектор [popup], а для изменения заднего фона под всплывающим окном применяется псевдоэлемент ::backdrop.

Синтаксис

popover | popover="auto | manual"

Значения

auto: Закрывает все открытые всплывающие окна. Также вместо auto допустимо указывать пустое значение (popover="") или вообще не писать значение (popover).
manual: Уже открытые всплывающие окна не закрываются.

Значение по умолчанию

auto

Пример

Код примера скопирован в буфер

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>popover</title>
  <style>
   :root { --s: 50px; }
   .btn-fab {
    width: var(--s); height: var(--s); /* Размеры кнопки */
    background-color: #8BC34A; /* Цвет фона кнопки */
    border: none; /* Убираем рамку */
    border-radius: 50%; /* Круглая кнопка */
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); /* Параметры тени */
    font-size: 0; /* Убираем */
    position: fixed; /* Фиксированное положение */
    bottom: 2rem; right: 2rem; /* В правом нижнем углу */
   }
   [popover] {
    padding: 1em 2em; /* Расстояние от текста до рамки */
   }
   [popover]::backdrop {
    background: rgba(0, 0, 0, 0.3); /* Полупрозрачный фон */
    backdrop-filter: blur(4px); /* Размываем содержимое под фоном */
   }
  </style>
 </head>
 <body>
  <div id="fab" popover>
   <form action="handler.php">
    <p>Новая категория</p>
    <p><input name="category" placeholder="Введите имя категории" autofocus></p>
    <p><button>Создать</button></p>
   </form>
  </div>
  <button popovertarget="fab" class="btn-fab">
   <img src="image/button-plus-white.svg" alt="">
  </button>
 </body>
</html>

Примечание

В Firefox атрибут popover по умолчанию отключен. Для его работы в настройках программы по адресу about:config следует найти параметр dom.element.popover.enabled и установить ему значение true (рис. 2).

Настройка параметров в Firefox