dialog标签应用举例

马黑黑

模拟登录窗口：

姓名：

密码：

登录解锁本页面

如你所见，dialog标签可以是一个模态窗口（Modal Dialog）。模态窗口在保留主界面显示的同时禁用主界面的用户交互，子界面交互完毕返回正常的主界面。本文模拟的模态窗口是一个登录窗口，只是模拟，不做任何事情，但从中应该可以感受到dialog标签的强大——在H5以前，做这样的模态窗口是个繁重且繁琐的事情，而现在简单到令人难以置信：

<dialog id="dialog1"> <p>这是一个 dialog 模态窗口</p> <P><button onclick="dialog1.close()" title="Esc">关闭（Esc）</button></P> </dialog> <p><button onclick="dialog1.showModal()">打开模态窗口</button></p>

dialog标签默认不显示，需要通过 元素.showModal() 激活它。所以上面的示例代码设置了一个按钮用于激活dialog模态窗口，dialog标签内也加入一个按钮，点击该按钮会触发 元素.close() 事件，dialog窗口会自动关闭。上述代码可以在线预览效果，效果中因为是在预览页面中演示，预览页面的关闭按钮层级设置得很高，其交互功能不受到dialog窗口的影响。

dialog模态窗口集成快捷键关闭功能，按Esc键可关闭该窗口。所以，模态窗口中即使不设置关闭按钮，一样可以关闭它，提供交互按钮可以提升人机对话的友好性。

dialog窗口还能以非模态窗口方式渲染，有两种实现方法：其一，使用html属性 open 令其一开始就自动激活；其二，使用 元素.show() 方法。以下代码演示的是第二种方法：

<!-- 使用下一行代码替代第三行自动激活非模态窗口 --> <!-- dialog id="player" open --> <dialog id="player"> <p><audio id="aud" src="https://music.163.com/song/media/outer/url?id=2115755857" controls></audio></p> <P><button onclick="player.close()" title="Esc">关闭窗口和音乐（Esc）</button></P> </dialog> <p><button onclick="player.show();aud.play();">打开 dialog 非模态窗口</button></p> <p><button onclick="alert('主界面在非模态弹窗激活时仍然可以交互')">测试按钮</button></p> <script> player.onclose = () => aud.currentTime = aud.duration; </script>

非模态窗口就是普通的弹窗，它不屏蔽主窗口的交互。上例中，窗口弹出后主界面上的测试按钮依然可以正常工作。例中的JS代码不是dialog弹窗必须的，这里加入它目的有二：一是演示 dialog 标签的 close 监听事件，可以通过监听窗口的关闭事件做需要做的事情，例如例中的停止音乐。dialog 还有一个 cancel 事件可以监听。

显然，dialog标签简化了弹窗的操作，使用者甚至可以不依赖过多的JS编程就可以实现一些高级功能，非常实用。

马黑黑

本页面的模拟登录窗口 Esc 键似乎不灵，原因可能与 Discuz！定义了相关快捷键有关，在我的站点操作正常：

        dialog标签应用举例

另外，一楼的两个演示代码由于另开页面，不受 Discuz！的设置影响，可以正常使用 Esc 键关闭模态窗口。

小辣椒

黑黑，我打开这个要登录，哈哈我直接输入小辣椒进来了？

小辣椒

马黑黑 发表于 2026-2-3 13:34
本页面的模拟登录窗口 Esc 键似乎不灵，原因可能与 Discuz！定义了相关快捷键有关，在我的站点操作正常：
...

好吧我再试一次

小辣椒

好像不登录也是进来了