HTMLElement: метод togglePopover()

Метод togglePopover() интерфейса HTMLElement переключает элемент попапа (т.е. элемент, у которого есть допустимое значение атрибута popover) между скрытым и видимым состояниями.

При вызове togglePopover() для элемента с атрибутом popover:

1. Срабатывает событие beforetoggle.
2. Попап переключается между скрытым и видимым состояниями:
   1. Если он был первоначально видимым, он переключается на скрытый.
   2. Если он был первоначально скрытым, он переключается на видимый.
3. Срабатывает событие toggle.

force

Булево значение, которое заставляет togglePopover() вести себя как showPopover() или hidePopover(), за исключением того, что оно не выбрасывает исключение, если попап уже находится в целевом состоянии.

• Если установлено в true, попап отображается, если он был первоначально скрытым. Если он был первоначально видимым, ничего не происходит.
• Если установлено в false, попап скрывается, если он был первоначально видимым. Если он был первоначально скрытым, ничего не происходит.

true если попап открыт после вызова, и false в противном случае.

None (undefined) может быть возвращено в более старых версиях браузера (см. совместимость с браузерами).

См. страницу примеров API попапов для доступа к полному набору примеров попапов MDN.

Это немного изменённая версия примера попапа Toggle Help UI. Пример переключает попап включение и выключение нажатием определённой клавиши на клавиатуре (когда окно примера имеет фокус).

Ниже показан HTML для примера. Этот первый элемент определяет инструкции по вызову попапа, которые нам нужны, потому что попапы скрыты по умолчанию.

<p id="instructions">
  Press "h" to toggle a help screen (select example window first).
</p>

Затем мы определяем элемент <div>, который является попапом. Фактическое содержимое не имеет значения, но обратите внимание, что нам нужен атрибут popover, чтобы превратить <div> в попап, чтобы он был скрыт по умолчанию (или мы можем установить этот элемент в JavaScript).

<div id="mypopover" popover>
  <h2>Help!</h2>

  <p>You can use the following commands to control the app</p>

  <ul>
    <li>Press <ins>C</ins> to order cheese</li>
    <li>Press <ins>T</ins> to order tofu</li>
    <li>Press <ins>B</ins> to order bacon</li>
  </ul>
</div>

Ниже показан JavaScript для примера. Сначала мы проверяем, поддерживаются ли попапы, и если нет, скрываем попап div, чтобы он не отображался в строке.

const instructions = document.getElementById("instructions");
const popover = document.getElementById("mypopover");

if (!HTMLElement.prototype.hasOwnProperty("popover")) {
  popover.innerText = "";
  instructions.innerText = "Popovers not supported";
}

Если попапы поддерживаются, мы добавляем слушатель для нажатия клавиши h, чтобы использовать его для открытия попапа. Мы также записываем, был ли попап открыт или закрыт после вызова, но только если возвращалось значение true или false.

if (HTMLElement.prototype.hasOwnProperty("popover")) {
  document.addEventListener("keydown", (event) => {
    if (event.key === "h") {
      const popupOpened = popover.togglePopover();

      // Check if popover is opened or closed on supporting browsers
      if (popupOpened !== undefined) {
        instructions.innerText +=
          popupOpened === true ? `\nOpened` : `\nClosed`;
      }
    }
  });
}

Вы можете протестировать это с помощью живого примера ниже.

• popover Глобальный атрибут HTML
• API попапов