HTML – Native Dialog Modal
前言
之前介绍 Native Form 的时候有提及过 method="dialog", 但由于它太新了, 所以没去研究. 这篇就介绍一下.
Dialog 也好 Modal 也好, 都有人叫, 我的理解是 Modal 更抽象一点, Dialog 按 Material Design, 应该是要有 action 的才算. Modal 只要是 popup 的都算.
但这篇我们配合 HTML 叫它 dialog 吧.
参考:
Youtube – Use dialog for the easiest way to make a popup modal
搭场景
<button id="js-open-dialog-btn">Show Dialog</button> <dialog class="dialog" id="js-dialog"> <h1>title</h1> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil itaque deleniti eligendi possimus perferendis necessitatibus officiis minus libero? Sapiente nisi dolores eius dicta </p> <button id="js-close-dialog-btn">Close Dialog</button> </dialog>
一个 show dialog button
一个 dialog, 里面有内容和 close button
效果
dialog 会自动被隐藏起来. 看不见的.
show dialog
const openDialogBtn = document.querySelector<HTMLButtonElement>('#js-open-dialog-btn')!; const dialog = document.querySelector<HTMLDialogElement>('#js-dialog')!; openDialogBtn.addEventListener('click', () => { dialog.showModal(); });
找到 dialog element 调用 showModal 它就会出来了.
HTMLDialogElement
typescript 目前没用这个类型, 所以需要自己写. 可以参考: MDN – HTMLDialogElement
interface HTMLDialogElement extends Element { open: boolean; returnValue: string; show: () => void; showModal: () => void; close: (returnValue?: string) => void; }
open 是看当前是 show 还是 hide, 这个命名不太好的, 应该用 opened 名词而不是动词.
show 是把 <dialog> show 出来, 但是它不会 popup 而在它原来的位置.
showModal 才是像 popup 那样 show 在中间
close 是关闭, 同时可以 passing 一个 string value 作为 return value
returnValue 是在 close 的时候 set 进去的, 默认是 empty string
default style
1. backdrop 是灰色
2. dialog 有默认的 border-width
custom style
.dialog { &::backdrop { background-color: rgb(255 0 0 / 0.5); } border-width: 0; max-width: 50%; }
::backdrop 可以选择到 backdrop 修改颜色
效果
scroll 逻辑
当 dialog 开启的时候 body 依然是可以 scroll 的哦.
backdrop & close 逻辑
keyboard Esc 会关闭 dialog, backdrop 的区域也属于 dialog 内. 它是无法监听到的
参考: stackoverflow – Dismiss html dialog element by clicking the backdrop
除了 Esc 只有 dialog 内自己做 button 通过 JS 才能 close dialog.
closeDialogBtn.addEventListener('click', () => {
dialog.close('some return value');
});
调用 close 的时候可以传入 return value, 通过 dialog.returnValue 获取.
event
dialog 有 2 个 event 可以监听.
1. cancel
2. close
cancel 只有在 Esc 的时候会触发
Esc, .close 都会触发 close event.
所以 Esc 会触发 cancel 然后再触发 close event.
form method="dialog"
<dialog class="dialog" id="js-dialog"> <form method="dialog"> <input name="firstName" value="Derrick" /> <button type="submit" value="value123">submit</button> </form> </dialog>
dialog 里面的 form method="dialog" 在 submit 时会 close dialog.
button value 会被 set to return value 里.
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体