html dialog

<dialog>是html5中新增加的元素,除了带有一定的语义,也带有它自己独特的属性样式和对应的api

open close

dialog可以通过open属性来控制显示隐藏

<dialog open>hello world</dialog>

也可以使用show showModal方法来控制显示,区别是使用showModal时会得到一个能用::backdrop伪元素改变样式的背景遮罩;用 close方法来控制隐藏

<button onclick="window.dialog.showModal()">open dialog</button>
<dialog id="dialog">
  <p>hello world</p>
  <button onclick="window.dialog.close()">open dialog</button>  
</dialog>

如果dialog内有一个method="dialog"的form元素,提交表单也会关闭弹框

使用这种方式关闭时,dialog的returnValue属性会被设置为提交表单的button的value值

<button onclick="window.dialog2.showModal();">open dialog</button>

<dialog id="dialog2">
  <p>I'm a dialog.</p>
  <form method="dialog">
    <button value="cancel">cancel</button>
    <button value="confirm">confirm</button>
  </form>
</dialog>

<script>
  window.dialog2.addEventListener('close', function () {
    console.log(this.returnValue)
  })
</script>

给dialog添加样式

添加显示的动画

dialog[open] {
  animation: appear .15s cubic-bezier(0, 1.8, 1, 1.8);
}

@keyframes appear {
  from {
    opacity: 0;
    transform: translateX(-3rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

更改背景层的样式

dialog::backdrop {
  background: linear-gradient(45deg, rgba(0,143,104,.5), rgba(250,224,66,.5));
}

兼容性

目前可能只有chrome支持的比较好

参考:
Some Hands-On with the HTML Dialog Element | CSS-Tricks
Native Modals on the Web Using the HTML Dialog Element ← Alligator.io