Введение в Popover API

Сначала <dialog>, а теперь Поповеры/Всплывающие окна! Popover API, позволяющий создавать всплывающие окна, теперь доступен в большинстве современных браузеров.

В статье рассмотрены основы Popover API и то, как использовать его для создания всплывающих окон самым простым способом.

Что такое Поповер

Поповеры — это небольшие всплывающие окна, появляющиеся, когда пользователь нажимает клавишу или наводит курсор на определённый элемент на веб-странице или в приложении. Они показывают дополнительное содержимое или информацию, не перенаправляя пользователя на новую страницу. Всплывающие окна могут содержать текст, изображения, ссылки и другие интерактивные элементы.

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

• Всплывающие подсказки: Всплывающие окна часто предоставляют краткую и полезную информацию о конкретном элементе. Они похожи на всплывающие подсказки, но обычно более сложные и интерактивные.
• Формы: Они могут содержать формы для ввода данных пользователем, такие как формы входа в систему, строки поиска или формы обратной связи.
• Уведомления: Всплывающие окна могут использоваться для отображения уведомлений, предупреждений, оповещений или обновлений более заметным способом, чем простое текстовое сообщение.
• Меню: Выпадающие меню или контекстные меню, появляющиеся при клике на элемент, могут считаться всплывающими окнами.
• Дополнительные сведения: Они полезны для отображения дополнительных деталей или опций, связанных с конкретным элементом, не загромождая основной интерфейс.

Как уже отмечалось, для реализации всплывающих окон требовалась библиотека JavaScript вроде popper.js или собственный JavaScript, пока в браузерах не появился Popover API.

По сути, Popover API — это конгломерат HTML-атрибутов, CSS-свойств и JavaScript API, позволяющих разработчикам создавать всплывающие окна гибким и настраиваемым способом.

Базовое всплывающее окно

Чтобы создать любой HTML-элемент в виде всплывающего окна, достаточно добавить к нему новый атрибут popover. И всё! Теперь элемент работает как всплывающее окно.

<div id="demopopover" popover>
    A popover element
</div>

Когда элемент становится всплывающим окном, он будет скрыт по умолчанию.

Всплывающее окно можно, по сути, показать,

• При клике на другой элемент
• Через JavaScript API

Отображение всплывающего окна при клике на другом элементе

Чтобы показать всплывающее окно при клике на кнопку, можно использовать атрибут popovertarget на кнопке и задать ему id элемента всплывающего окна.

<button popovertarget="demopopover">
    Toggle Popover Button
</button>

<div id="demopopover" popover>
    A popover element
</div>

Вот как это выглядит в действии.

See the Pen

По умолчанию клик по кнопке просто переключает всплывающее окно. Но при желании можно отделить действие показа всплывающего окна от действия скрытия всплывающего окна с помощью атрибута popovertargetaction и присвоить ему значение show или hide соответственно.

<button popovertarget="demopopover" popovertargetaction="show">
    Show Popover Button
</button>

<button popovertarget="demopopover" popovertargetaction="hide">
    Hide Popover Button
</button>

<div id="demopopover" popover>
    A popover element
</div>

Вот как это выглядит в действии.

See the Pen

Отображение всплывающего окна с помощью JavaScript API

Чтобы показать всплывающее окно с помощью JavaScript, сначала нужно захватить popover элемент, скажем, через id элемента, а затем вызвать метод togglePopover() для него.

const popover = document.getElementById('demopopover');

popover.togglePopover();

В следующем примере при нажатии клавиши p переключается всплывающее окно.

See the Pen

Метод togglePopover() позволяет показывать или скрывать всплывающее окно путём повторного нажатия клавиши p.

Существуют методы, которые можно использовать, чтобы показать или скрыть всплывающее окно соответственно.

• showPopover() — Показать всплывающее окно
• hidePopover() — Скрыть всплывающее окно

Используйте эти методы в соответствии с вашими потребностями.

Немного о лёгком закрывании всплывающих окон

Если атрибут popover используется без значения, то его значение по умолчанию — auto.

Это означает, что всплывающее окно исчезнет, когда…

• Пользователь кликает за пределами всплывающего окна
• Нажимает клавишу Esc.

Если необходимо отключить это поведение, можно использовать атрибут popover со значением manual.

<div id="demopopover" popover="manual">
    A popover element
</div>

Теперь всплывающее окно не будет исчезать, если пользователь кликнет за его пределами или нажмёт клавишу Esc. Его можно убрать только кликнув по всплывающему окну или вызвав метод hidePopover().

Стилизация всплывающего окна

По умолчанию стилизация всплывающего окна довольно скромная. Но его можно стилизовать по своему усмотрению.

Для стилизации всплывающего окна используется селектор [popover].

[popover] {
    background-color: lightblue;
    color: #514f4f;
    padding: 3em;
    border-radius: 10px;
    border: none;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    box-shadow: 1px 1px 5px 0px #0000005e;
}

Результат выглядит так.

See the Pen

Мы также можем изменить фон всплывающего окна с помощью селектора ::backdrop. Например, можно сделать фон всплывающего окна размытым.

::backdrop {
  backdrop-filter: blur(3px);
}

Результат выглядит так.

See the Pen

Анимация всплывающего окна

По умолчанию анимация всплывающего окна — это простой fade-in и fade-out. Но это поведение можно настроить, используя комбинацию псевдокласса :popover-open и правила @starting-style, как показано ниже.

[popover]:popover-open {
  opacity: 1;
  transform: rotate(0deg);
}

[popover] {
  background-color: lightblue;
  color: #514f4f;
  padding: 3em;
  border-radius: 10px;
  border: none;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.2em;
  box-shadow: 1px 1px 5px 0px #0000005e;

  /* Финальное состояние анимации выхода */
  opacity: 0;
  transform: rotate(0deg);

  transition: opacity 0.5s, transform 0.5s, overlay 0.5s allow-discrete,
    display 0.5s allow-discrete;
}

/* Должно быть после предыдущего правила [popover]:popover-open
чтобы оно вступило в силу, поскольку специфика та же. */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: rotate(90deg);
  }
}

::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition: display 0.7s allow-discrete, overlay 0.7s allow-discrete,
    background-color 0.7s;
}

[popover]:popover-open::backdrop {
  background-color: rgb(0 0 0 / 25%);
}

/* Селектор вложенности (&) не может представлять псевдоэлементы
поэтому это правило starting-style не может быть вложено */
@starting-style {
  [popover]:popover-open::backdrop {
    background-color: rgb(0 0 0 / 0%);
  }
}

Конечный результат выглядит так.

See the Pen

Как вы можете видеть, всплывающее окно поворачивается на 90 градусов и переходит в конечное состояние после задержки в 0,5 секунды. Это достигается с помощью псевдокласса :popover-open. С помощью at-правило @starting-style начинается анимация, а свойство transition используется для анимирования свойств opacity и transform.

Проверка поддержки Popover API

Хотя Popover API доступен в большинстве современных браузеров, может оказаться, что используемый браузер его не поддерживает.

Чтобы проверить, поддерживается ли API Popover, можно проверить, поддерживается ли свойство popover в интерфейсе HTMLElement или нет.

if ('popover' in HTMLElement.prototype) {
    console.log('Popover API is supported');
}

Исходя из этого, можно решать, использовать ли Popover API или нет.

• Тесты поддержки браузерами современных веб-функций на JavaScript

Заключение

Popover API улучшает взаимодействие с пользователем, позволяя разработчикам создавать контекстно-зависимые всплывающие окна, предоставляющие дополнительную информацию или действия без использования внешних библиотек или с минимальным количеством кода.

А поскольку API Popover доступен в большинстве современных браузеров, не вижу причин, по которым не стоит использовать его вместо любой другой JavaScript библиотеки.