模态窗口（弹窗）生成器，基于 dialog

模态窗口（弹窗）生成器，基于 dialog: 用途

模态窗口用于确认操作、显示简短表单或突出一条提示，而不让用户离开页面。用 div 手工实现时，键盘和屏幕阅读器方面往往有问题。

此生成器使用带 showModal() 的 dialog 元素，自 2022 年起所有主流浏览器都支持：浏览器把窗口置于上层，让页面其余部分失效，锁定焦点，按 Esc 关闭，并把焦点还给按钮。代码添加了样式、点击外部关闭，以及用 @starting-style 实现的平滑入场，并尊重偏好减少动态效果的用户。

使用方法

1. 写好标题、文字和按钮。
2. 选择颜色、宽度和圆角。
3. 在预览中测试并复制代码。

使用场景

• 通过微信预约的提示。
• 操作前的确认。
• 新功能提示或简短表单。

常见问题

为什么要用 dialog 元素？

通过 showModal()，浏览器会把窗口置于最上层，让页面其余部分失效，把焦点锁定在窗口内，按 Esc 关闭，并把焦点还给打开它的按钮。以前这需要大量 JavaScript，而且几乎总会留下无障碍方面的缺陷。

所有浏览器都支持吗？

支持，Chrome、Edge、Firefox 和 Safari 自 2022 年起都支持 dialog。

可以在进入网站时自动打开模态窗口吗？

可以，但未经用户请求就弹出的窗口通常令人反感，而且在手机上，谷歌可能会降低遮挡内容的侵入式广告页面的排名。建议通过按钮打开。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具