个人中心
gpt4 book ai didi

Popover API: How to stop the popover from closing(Popover接口：如何停止关闭Popover)

转载 作者：bug小助手 更新时间：2023-10-28 13:26:59 27 4
gpt4 key购买 nike



When using the popover API, I would like to, when light dismiss occurs, stop the popover from closing, and run custom js to remove the popover from the screen.

当使用弹出窗口API时，我想，当轻关闭发生时，停止弹出窗口关闭，并运行自定义js从屏幕上删除弹出窗口。


Is there a way to do this?

有办法做到这一点吗？


I tried to do this but this didn't work.

我试着这么做，但没成功。




<style>
  div {
    height: 100px;
    width: 100px;
    background-color: hotpink;
  }
</style>
<div popover></div>
<script>
  document.querySelector("div").showPopover();
  document
    .querySelector("div")
    .addEventListener("beforetoggle", (event) => {
      if (event.newState === "closed") {
        event.preventDefault();
        event.stopPropagation();

        // Run custom JS to remove popover from dom 
      }
    });
</script>




更多回答

coming in hot with the links. Thanks, this does solve my issue

带着链接火热地进入。谢谢，这确实解决了我的问题

优秀答案推荐

Make the popover as a backdrop for an internal DIV acting as an actual popover.
Then you can catch clicks and do anything you want, replace popover.hidePopover() to anything you want.
If you want the backdrop transparent for mouse event you should some direct them manually, an example for click is provided:

将弹出画面作为内部DIV作为实际弹出画面的背景。然后，您可以捕捉点击并执行任何您想要的操作，将opover.hidePopover()替换为您想要的任何内容。如果你想让鼠标事件的背景是透明的，你应该手动引导它们，下面提供一个点击的例子：




const popover = document.querySelector("[popover]");


popover.showPopover(); popover.classList.toggle('opened');
popover.addEventListener('beforetoggle', e => popover.classList.toggle('opened', e.newState !== 'closed'));
popover.addEventListener("click", e => e.target.closest('.popover') || popover.hidePopover() || document.elementFromPoint(e.pageX, e.pageY)?.click());

.popover{
    height: 150px;
    width: 150px;
    background-color: hotpink;
    box-shadow: 5px 5px 5px rgba(0,0,0,.3);
    border: 1px solid gray;
    border-radius: 5px;
  }
  .backdrop{
  border:none;
  width:100%;
  height:100%;
  background: transparent;
    }
    
    .opened{
      display:flex;
  align-items:center;
  justify-content:center;
  
  }

<button onclick="console.log('button clicked')">Click me</button>
<button onclick="$popover.showPopover()">Show popover</button>
<div id="$popover" popover class="backdrop"><div class="popover"></div></div>




更多回答

27 4 0
文章推荐： kotlin - Kotlin 的不稳定属性？
文章推荐： mongodb - 在 Windows 中构建 MongoDB C 驱动程序
文章推荐： kotlin - 为什么 Kotlin 需要在编译后捆绑其运行时？
文章推荐： mongodb - 有没有适用于 MongoDB 的 Mac 的优秀数据库管理应用程序？类似于 Sequel Pro？
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com