HTMLInputElement: свойство popoverTargetElement

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

Это JavaScript-аналог HTML-атрибута popovertarget.

Ссылка на элемент всплывающего окна (popover) в DOM.

Этот пример демонстрирует базовое использование API всплывающего окна, устанавливая элемент <div> в качестве всплывающего окна и затем назначая его в качестве popoverTargetElement элемента <input> в type="button". Атрибут popover установлен в значение "auto", чтобы всплывающее окно можно было закрыть ("лёгкое закрытие"), щелкнув вне области всплывающего окна.

Сначала мы определяем элемент <input>, который будет использоваться для отображения и скрытия всплывающего окна, и элемент <div>, который будет самим всплывающим окном. В этом случае мы не устанавливаем HTML-атрибут popovertargetaction на элемент <input> или атрибут 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 всплывающего окна поддерживается, код устанавливает атрибут popover элемента <div> в значение "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;
}

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

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