dialog标签应用举例
<style>.artBox { font-size: 20px; margin: 30px auto; max-width: 1200px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #333; }
.artBox > p { margin: 15px 0; line-height: 1.8; text-align: justify; }
.artBox blockquote { background: #f9f9f9; border-left: 4px solid #1a73e8; padding: 15px 20px; margin: 20px 0; font-style: italic; color: #555; }
.artBox code { background: #eee; padding: 2px 6px; border-radius: 3px; font-family: 'Consolas', 'Monaco', monospace; font-size: 0.95em; }
.artBox button, .artBox input { font-size: 18px; }
.artBox .mid { text-align: center; }
.dialog { border: none; border-radius: 16px; box-shadow: 1px 1px 4px rgba(0,0,0,0.5); }
</style>
<div class="artBox">
<dialog id="loginDialog" class="dialog">
<p>
<strong>模拟登录窗口：</strong><br><br>
<label for="uName">姓名：</label>
<input type="text" id="uName" value="匿名"><br><br>
<label for="uPass">密码：</label>
<input type="password" id="uName" value="123456">
<p class="mid"><br><button type="button" id="btnLogin" onclick="loginDialog.close()">登录解锁本页面</button></p>
</p>
</dialog>
<p>如你所见，<code>dialog</code>标签可以是一个模态窗口（Modal Dialog）。模态窗口在保留主界面显示的同时禁用主界面的用户交互，子界面交互完毕返回正常的主界面。本文模拟的模态窗口是一个登录窗口，只是模拟，不做任何事情，但从中应该可以感受到<code>dialog</code>标签的强大——在H5以前，做这样的模态窗口是个繁重且繁琐的事情，而现在简单到令人难以置信：</p>
<div class="codebox" data-prev="1">
<dialog id="dialog1">
<p>这是一个 dialog 模态窗口</p>
<P><button onclick="dialog1.close()" title="Esc">关闭（Esc）</button></P>
</dialog>
<p><button onclick="dialog1.showModal()">打开模态窗口</button></p>
</div>
<p><code>dialog</code>标签默认不显示，需要通过 <code>元素.showModal()</code> 激活它。所以上面的示例代码设置了一个按钮用于激活dialog模态窗口，dialog标签内也加入一个按钮，点击该按钮会触发 <code>元素.close()</code> 事件，dialog窗口会自动关闭。上述代码可以在线预览效果，效果中因为是在预览页面中演示，预览页面的关闭按钮层级设置得很高，其交互功能不受到dialog窗口的影响。</p>
<p>dialog模态窗口集成快捷键关闭功能，按Esc键可关闭该窗口。所以，模态窗口中即使不设置关闭按钮，一样可以关闭它，提供交互按钮可以提升人机对话的友好性。</p>
<p>dialog窗口还能以非模态窗口方式渲染，有两种实现方法：其一，使用html属性 <code>open</code> 令其一开始就自动激活；其二，使用 <code>元素.show()</code> 方法。以下代码演示的是第二种方法：</p>
<div class="codebox" data-prev="1">
<!-- 使用下一行代码替代第三行自动激活非模态窗口 -->
<!-- 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>
</div>
<p>非模态窗口就是普通的弹窗，它不屏蔽主窗口的交互。上例中，窗口弹出后主界面上的测试按钮依然可以正常工作。例中的JS代码不是dialog弹窗必须的，这里加入它目的有二：一是演示 dialog 标签的 <code>close</code> 监听事件，可以通过监听窗口的关闭事件做需要做的事情，例如例中的停止音乐。dialog 还有一个 cancel 事件可以监听。</p>
<p>显然，dialog标签简化了弹窗的操作，使用者甚至可以不依赖过多的JS编程就可以实现一些高级功能，非常实用。</p>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/helight/linenumber.js';
linenumber();
document.addEventListener("DOMContentLoaded", (e) => {
loginDialog.showModal();
}, false);
</script> 本页面的模拟登录窗口 Esc 键似乎不灵，原因可能与 Discuz！定义了相关快捷键有关，在我的站点操作正常：
dialog标签应用举例
另外，一楼的两个演示代码由于另开页面，不受 Discuz！的设置影响，可以正常使用 Esc 键关闭模态窗口。 黑黑，我打开这个要登录，哈哈我直接输入小辣椒进来了？ 马黑黑 发表于 2026-2-3 13:34
本页面的模拟登录窗口 Esc 键似乎不灵，原因可能与 Discuz！定义了相关快捷键有关，在我的站点操作正常：
...
好吧我再试一次 好像不登录也是进来了 马老师下午好，我在看“天书“{:4_189:}，只是不登录我只能看不能回复，登录后就正常了{:4_190:}{:4_204:}
不管三七二十八，我直接进来了，一看啥也不懂傻眼了{:4_196:} 樵歌 发表于 2026-2-3 17:43
不管三七二十八，我直接进来了，一看啥也不懂傻眼了
懂得“登录”就成{:4_189:} 霜染枫丹 发表于 2026-2-3 15:37
马老师下午好，我在看“天书“，只是不登录我只能看不能回复，登录后就正常了
...
“登录”只是一个模拟 小辣椒 发表于 2026-2-3 13:37
好像不登录也是进来了
模拟而已，不是真正的登录，但要交互以下，否则不能回复 小辣椒 发表于 2026-2-3 13:35
黑黑，我打开这个要登录，哈哈我直接输入小辣椒进来了？
输不输入都可以的，点一下登录按钮或按一下Esc键就成 马黑黑 发表于 2026-2-3 17:48
懂得“登录”就成
这两字还是认识的{:4_173:} 樵歌 发表于 2026-2-3 18:14
这两字还是认识的
你认得的字很多很多
页:
[1]