HTMLInputElement: свойство popoverTargetAction

Свойство popoverTargetAction интерфейса HTMLInputElement получает и устанавливает действие, которое должно быть выполнено ("hide", "show", или "toggle") над элементом всплывающего окна, управляемым элементом <input> элемента type="button".

Оно отражает значение атрибута HTML popovertargetaction.

Перечисление. Возможные значения:

"hide"

Кнопка скроет видимое всплывающее окно. Если вы попытаетесь скрыть уже скрытое всплывающее окно, действие не будет выполнено.

"show"

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

"toggle"

Кнопка переключит состояние всплывающего окна между отображением и скрытием. Если всплывающее окно скрыто, оно будет отображено; если оно отображено, оно будет скрыто. Если popoverTargetAction не задано, "toggle" является значением по умолчанию.

Этот пример демонстрирует базовое использование API всплывающего окна со значением "переключить" для свойства popoverTargetAction. Атрибут popover задан как "auto", поэтому всплывающее окно можно закрыть ("лёгкое закрытие"), нажав вне области всплывающего окна.

Сначала мы определяем элемент <input> элемента type="button", который мы будем использовать для отображения и скрытия всплывающего окна, и элемент <div>, который будет всплывающим окном. В этом случае мы не устанавливаем атрибут HTML popovertargetaction на кнопке или атрибут popover на элементе <div>, так как мы будем делать это программно.

<input id="toggleBtn" type="button" value="Toggle popover" />
<div id="mypopover">This is popover content!</div>

Код JavaScript сначала получает обработку элементов <div> и <input>. Затем он определяет функцию для проверки поддержки всплывающего окна.

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

// Check for popover API support.
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}

Если API всплывающего окна поддерживается, код устанавливает атрибут <div> элемента popover на "auto" и делает его целевым элементом всплывающего окна для кнопки переключения. Затем мы устанавливаем значение popoverTargetAction кнопки на "toggle". Если API всплывающего окна не поддерживается, мы изменяем текстовое содержимое элемента <div> на соответствующее сообщение и скрываем кнопку переключения.

if (supportsPopover()) {
  // Set the <div> element to be an auto popover
  popover.popover = "auto";
  // Set the button popover target to be the popover
  toggleBtn.popoverTargetElement = popover;

  // Set that the button toggles popover visibility
  toggleBtn.popoverTargetAction = "toggle";
} else {
  popover.textContent = "Popover API not supported.";
  toggleBtn.hidden = true;
}

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

Этот пример показывает, как использовать значения "show" и "hide" атрибута popoverTargetAction.

Код почти идентичен предыдущему примеру, за исключением того, что есть два элемента <button>, и всплывающее окно настроено на "manual". Всплывающее окно manual должно быть закрыто явно, а не "лёгко закрыто" при нажатии вне области всплывающего окна.

<input id="showBtn" type="button" value="Show popover" />
<input id="hideBtn" type="button" value="Hide popover" />
<div id="mypopover">This is popover content!</div>

function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}

const popover = document.getElementById("mypopover");
const showBtn = document.getElementById("showBtn");
const hideBtn = document.getElementById("hideBtn");

const popoverSupported = supportsPopover();

if (supportsPopover()) {
  // Set the <div> element be a manual popover
  popover.popover = "manual";

  // Set the button targets to be the popover
  showBtn.popoverTargetElement = popover;
  hideBtn.popoverTargetElement = popover;

  // Set the target actions to be show/hide
  showBtn.popoverTargetAction = "show";
  hideBtn.popoverTargetAction = "hide";
} else {
  popover.textContent = "Popover API not supported.";
  showBtn.hidden = true;
  hideBtn.hidden = true;
}

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

• popover глобальный атрибут HTML
• API всплывающего окна