HTML dialog元素新支持了closedBy属性
💡
原文中文，约1900字，阅读约需5分钟。
📝
内容提要
<dialog>元素的closedBy属性允许通过点击半透明蒙层关闭弹框，简化了之前需要JavaScript实现的功能。该属性有三个值：any、closerequest和none，分别对应不同的关闭方式。目前Safari不支持该属性，可通过Polyfill解决。
🎯
关键要点
-
<dialog>元素的closedBy属性允许通过点击半透明蒙层关闭弹框，简化了之前需要JavaScript实现的功能。
-
closedBy属性有三个值：any、closerequest和none，分别对应不同的关闭方式。
-
如果未设置closedBy属性，浏览器会默认处理为auto，使用showModal()时等同于closerequest，使用show()时等同于none。
-
目前Safari浏览器不支持closedBy属性，可以通过Polyfill解决兼容性问题。
❓
延伸问答
<dialog>元素的closedBy属性有什么作用？
closedBy属性允许通过点击半透明蒙层关闭弹框，简化了之前需要JavaScript实现的功能。
closedBy属性支持哪些值？
closedBy属性有三个值：any、closerequest和none，分别对应不同的关闭方式。
如果不设置closedBy属性，浏览器会如何处理？
如果未设置closedBy属性，浏览器会默认处理为auto，使用showModal()时等同于closerequest，使用show()时等同于none。
Safari浏览器是否支持closedBy属性？
目前Safari浏览器不支持closedBy属性，可以通过Polyfill解决兼容性问题。
如何在项目中使用closedBy属性的Polyfill？
可以引入Polyfill，通过import语句导入并使用apply()方法来解决兼容性问题。
closedBy属性的any、closerequest和none分别代表什么？
any表示全部允许关闭，closerequest表示需要请求关闭，none表示禁止自动关闭。
🏷️
标签
➡️
