dialog标签应用举例

马黑黑 · 发表于 2026-2-3 13:22

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

如你所见，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"> <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编程就可以实现一些高级功能，非常实用。