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 里.