by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12102
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、长话短说

不知道大家用过<dialog>元素没有，我是使用了很多年了，挺好用的。

对于基础特性，各大浏览器都已经支持不错了。

但是，还不完美，且看下面这个场景。

请问，如果我们希望<dialog>弹框模态显示的时候，点击后面的半透明黑色蒙层关闭弹框，请问如何实现？

在之前，这个需求需要用到JS，但是现在，只需要一个HTML属性就可以实现了，这个属性就是closedBy属性。

比方说下面这个弹框HTML元素：

<dialog closedBy="any">点击蒙层我会隐藏哦~</dialog>

此时，如果我们执行dialog.showModal()让弹框显示，那么点击后面的蒙层弹框就会自动关闭。

眼见为实，你可以试试点击下面的按钮元素（Safari暂不支持），体验我所描述的效果：

显示模态框

二、closedBy属性的语法

closedby 属性是一个枚举属性，支持以下三个关键值：

具体的行为表现

如果我们没有设置closedBy属性，浏览器会当做auto处理。

也就是：

• 如果弹框元素是使用showModal()方法打开的，那么等同于设置了closedBy="closerequest"，也就是按下ESC键可以关闭，但是点击蒙层不行；
• 如果弹框元素是使用show()方法打开的，那么弹框的关闭行为等同于设置了closedBy="none"。

另外，closedBy属性也支持在DOM API层面直接读写，例如：

// 获取closedBy的属性值 (注意驼峰命名)
console.log(dialog.closedBy);
// 设置closedBy属性
dialog.closedBy = 'none'; 

三、好了，就这么点内容

最后看下兼容性：

目前Safari浏览器并不支持，若想在实际项目中使用，可以引入Polyfill：https://github.com/tak-dcxi/dialog-closedby-polyfill

使用非常简单：

import { apply, isSupported } from "dialog-closedby-polyfill";

if (!isSupported()) {
  apply();
}

其他就没什么了吧，感谢阅读，我们下篇文章再见！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12102

（本篇完）