前言

今天周六，打开 Youtube 时，看到一个 外国小哥🔗 介绍了一个 html 标签上的属性，可以不借助 js 打开一个弹窗，感觉有点意思，在此记录一下

实现效果如下：

popover

这是在 mdn 上关于 popover🔗 的介绍

在 任意元素 上添加属性 popover, 同时在触发元素上添加 popovertarget 属性指向这个元素的 id 即可触发

简单来说,我们只需要下面的代码就可以实现一个简单的弹窗

<button popovertarget="my-popover">打开 Popover</button>

<div popover id="my-popover">大家好！欢迎你们！</div>

(没有添加 css，所以显得比较简陋)

添加 css

可以看到，添加 popover 属性的元素刚好处于整个页面的中间位置，这是由于有默认样式

我们简单的添加一些 css 来美化这个弹窗

   /*  背景 */
  ::backdrop {
      background-color: rgb(150, 148, 148);
      backdrop-filter: blur(30px);
    }

    /* popover 元素 */
    :popover-open {
      background-color: #ff7008;
      color: white;
      border-radius: 10px;
      padding: 20px;
    }

添加 css 样式之后长这样

添加 js

但是这样弹窗有个小问题,就是无法执行关闭回调方法，而且只要点击背景就会关闭，无法手动控制,我们想要更加精细的控制弹窗隐藏，查看文档，找到对应的方法

1. hidePopover 关闭弹窗
2. showPopover 打开弹窗
3. beforetoggle 切换之前
4. toggle 切换之后

假如我们的 html 长这样

   <button id="button">打开弹窗</button>
   
   <div id="info" popover>
      <p> 一个简单的弹窗</p>
      <button id="closeBtn">关闭</button>
   </div>

我们使用 button 来打开关闭 弹窗

const button = document.getElementById("button");
const info = document.getElementById("info");
const closeBtn = document.getElementById("closeBtn");

 // 打开弹窗
  button.addEventListener("click",()=>{
     info.showPopover()
  })
   
 // 关闭弹窗
  closeBtn.addEventListener("click",()=>{
     info.hidePopover()
  })

等到打开/关闭的时候，我们可以监听到相应的回调方法

   info.addEventListener("beforetoggle", (event) => {
      if (event.newState === "open") {
        console.log("Popover is being shown");
      } else {
        console.log("Popover is being hidden");
      }
    });

    info.addEventListener("toggle", (event) => {
      if (event.newState === "open") {
        console.log("Popover has been shown");
      } else {
        console.log("Popover has been hidden");
      }
    });

更多信息可以查看英文版 🔗mdn popover

dialog

mdn 关于 🔗dialog 的解释

根据 mdn例子 做一个简化版

<button id="updateDetails">Update details</button>

  <dialog id="dialog">
    <form method="dialog">
      <p>Greetings, one and all!</p>
      <button id="button">OK</button>
    </form>
  </dialog>

   const updateButton = document.getElementById("updateDetails");
   const dialog = document.getElementById("dialog");

    updateButton.addEventListener("click", () => {
      dialog.showModal()
    })
    
    dialog.addEventListener("close", () => {
      console.log(1213)
    })

对,你没有看错, dialog 嵌套了 一个 form,而且 method 是 dialog

效果如下⬇️

不知道为啥要这样设计这种方法, 但是 中文mdn文档 的关闭方法只有这一个，经过查阅英文的 mdn，发现还有一种关闭方法 —— close,这种方法不必使用 form

  button.addEventListener("click", () => {
      dialog.close()
   })

总结

我们可以使用 dialog 标签 或者在 元素上添加属性 popover 来创建一个 弹窗

如果是 dialog 标签，可以使用 showModal 和 close 方法来打开关闭 如果使用 popover 属性，默认是点击蒙层即可关闭，我们可以添加 popover="manual" 手动控制显示隐藏，调用 showPopover / hidePopover 方法控制显示隐藏，同时我们也可以监听 beforetoggle/toggle 方法来 显示隐藏状态的变化