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

MDN – HTMLDialogElement

搭场景

<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- 0;
  max- 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 里.

参考: MDN – The Dialog element