阿超 > dialog标签

dialog标签

2024-06-01

前端

懂得兜圈子，绕道而行的人，往往是第一个登上山峰的人。——佚名

今天分享一个html标签dialog

<dialog>：对话框元素 - HTML（超文本标记语言） | MDN

这是一个2022年新增的新标签

说白了就是一个弹框

简单示例：

1
2
3
4
5
6
<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

我们可以对齐增加一个动画：

代码出处：

Animating <dialog>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- 
  Transition or Animate a <dialog> Modal Open + closed state

  Problem: The browser display:none; → display:block; on <dialog> when the modal opens. This means we can't transiton between then.

Solitions?
1. Use an animation on [open] or :modal. This works on opening, but does not work when closing since its immediately display: none;
2. display:block; and then visually hide. This works, but now the modal is a focus trap. pointer-events and user-select help mouse events, but not keyboard

Is the only way to animate both IN and OUT to do a bunch of sequental class add + remove with JS?!

-->
<button onClick="window.dialog.showModal()">Open Dialog</button>

<dialog id="dialog">
  <h2>Hello</h2>
  <p>click the button or press esc to close</p>
  <input type="text" placeholder="Youy shouldnt be able to type in me until I'm open">
  <form method="dialog">
    <button type="submit">Close</button>
  </form>
</dialog>


动画：

1