最近我一直在研究HTML的<dialog></dialog>元素。对于不需要大量JavaScript代码的原生对话框来说，它确实非常方便。
想看看实际效果？您可以访问我的游戏Jumblie，然后点击顶部“设置”齿轮按钮。
言归正传！在网站上使用<dialog></dialog>元素时，您可能会发现以下技巧非常实用！
模糊<dialog></dialog>背景
立即学习“前端免费学习笔记（深入）”；
::backdrop CSS伪元素并不局限于<dialog></dialog>元素。您可以随意设计它，但如果想保持简洁，可以添加模糊滤镜，稍微模糊背景：
<code class="css">dialog::backdrop {
backdrop-filter: blur(2px);
}</code>
当然，您还可以添加其他属性，例如背景颜色。如果您想深入了解，我之前写过一篇关于使用JavaScript设计伪元素样式的文章！
打开<dialog></dialog>时禁用页面滚动
这是一个很巧妙的选择器，非常实用。当<dialog></dialog>打开时，它会向标签添加一个open属性。
<code class="css">body:has(dialog[open]) {
overflow: hidden;
}</code>
这个选择器会检查body元素是否包含具有open属性的<dialog></dialog>元素。如果是，它将禁用页面滚动！当然，如果您的对话框内容很多，您可能需要在对话框内部单独启用滚动，但它可以防止在滚动时对话框后面的页面内容移动。
就是这样！希望这些技巧对您有所帮助！
