1. 默认打开弹窗
open 属性默认打开弹窗
<dialog id="myDialog" open></dialog>
2. js 打开弹窗
<button class="open-btn" onclick="myDialog.show()">弹窗</button>
3. js 关闭弹窗
<button class="close-btn" onclick="myDialog.close()">关闭</button>
4. js 打开弹窗模态框
<button class="open-btn" onclick="myDialog.showModal()">弹窗</button>
5. 打开子弹窗
在内部再打开一个弹窗就完事了
<dialog id="myDialog">
<div>
<p>this is a dialog</p>
<input type="text" />
<p>
<button class="close-btn" onclick="myDialog.close()">关闭</button>
<button class="open-sonDialog-btn" onclick="sonDialog.showModal()">打开子弹窗</button>
</p>
</div>
</dialog>
<dialog id="sonDialog">
<div>
<p>this is a dialog</p>
<input type="text" />
<p>
<button class="close-btn" onclick="sonDialog.close()">关闭</button>
</p>
</div>
</dialog>
6. css修改模态框背景
#myDialog::backdrop {
background-color: pink;
backdrop-filter: blur(4px); // 模态框背景模糊
}
7. 监听 esc 事件
dialog.addEventListener('cancel', (e) => {
debugger
e.preventDefault() // 阻止默认 esc 关闭行为
})
- close 事件 阻止默认行为是不能阻止关闭的
