Я пытаюсь использовать встроенный в HTML поповер. Я попытался использовать следующий JavaScript для включения/выключения всплывающего окна.
<div>
<button onclick = "handlePopover(event, 'popover-1')">+</button>
<aside id = "popover-1" popover = "">
<p>My Test</p>
</aside>
</div>
function handlePopover(event, id) {
// Identify the first popover element with the given id
const popover = document.getElementById(id)
// Exit early if no matching popover was found
if (!popover) return
// Get the coordinates of the clicked button
let rect = event.target.getBoundingClientRect()
// Modify the coordinates of the popover
popover.style.left = rect.left + 10 + "px"
popover.style.top = rect.top + 10 + "px"
// Toggle the display state
popover.togglePopover()
}
Поповер включается правильно и позиционируется правильно. Однако он не выключается, когда я нажимаю кнопку второй (или третий, или четвертый...) раз. Однако обратите внимание, что всплывающее окно исчезает, если я нажимаю за пределами области всплывающего окна, а не над кнопкой.
Как скрыть всплывающее окно при втором нажатии кнопки?
🤔 А знаете ли вы, что...
JavaScript можно использовать для создания ботов и автоматизации задач в браузерах с помощью Puppeteer.
Без специального обработчика событий
Вы можете легко это сделать, используя атрибут popovertarget.
<div>
<button popovertarget = "popover-1">+</button>
<aside id = "popover-1" popover>
<p>My Test</p>
</aside>
</div>
С обработчиком пользовательских событий
Использование состояния всплывающего окна вручную
Если вы хотите использовать для этого специальное событие, используйте popover="manual"
<aside id = "popover-1" popover = "manual">
<p>My Test</p>
</aside>
вы также можете сделать что-то вроде этого:
а) дать вашей кнопке идентификатор
<button id = "popOverId" onclick = "handlePopover(event, 'popover-1')">+</button>
б) переключить popOver при нажатии кнопки
let toggle = true;
function handlePopover(event, id) {
// Identify the first popover element with the given id
const popover = document.getElementById(id)
// Exit early if no matching popover was found
if (!popover) return
// Get the coordinates of the clicked button
let rect = event.target.getBoundingClientRect()
// Modify the coordinates of the popover
popover.style.left = rect.left + 10 + "px"
popover.style.top = rect.top + 10 + "px"
// Toggle the display state
popover.togglePopover(toggle);
}
document.addEventListener("click", (evt) => {
if (evt.target.id !== "popOverId") {
toggle = true;
} else {
toggle = !toggle;
}
});
Решение underscore более лаконичное и чистое, поэтому, если оно соответствует вашим потребностям, выбирайте именно его.