原生弹窗dialog的使用

在遇到需要弹窗的场景,我们经常使用element,或者ant-design,里面封装的dialog组件.

截止自 2022 年 3 月起所有的浏览器都已经支持原生的dialog元素,那么我们就可以使用原生的dialog元素,来实现弹窗功能.

原生弹窗dialog的使用

在react中的使用示例如下:

实时编辑器

function Clock(props) {
  const dialogElement = useRef(null)

  function openDialogShowModal() {
    if (!dialogElement.current.open) {
      dialogElement.current.showModal()
    }
  }
  function openDialog() {
    if (!dialogElement.current.open) {
      dialogElement.current.show()
    }
  }
  function cancelDialog() {
    dialogElement.current.close()
  }
  return (
    <div>
      <dialog ref={dialogElement} open>
        <p>Greetings, one and all!</p>
        <form method="dialog">
          <button>OK</button>
          <button onClick={cancelDialog}>Cancel</button>
        </form>
      </dialog>

      <button onClick={openDialog}>Show dialog</button>
      <button onClick={openDialogShowModal}>Show dialog modal</button>
    </div>
  )
}

结果

属性方法

可以通过showModal和show方法,可以打开.close方法关闭弹窗.

dialog也提供了一个open属性来控制它的打开状态,但是官方不建议我们通过切换open属性来控制dialog的打开状态.

通过showModal方法打开弹窗后可以通过backdrop伪元素来修改弹窗的背景样式.

::backdrop {
  background-image: linear-gradient(
    45deg,
    magenta,
    rebeccapurple,
    dodgerblue,
    green
  );
  opacity: 0.75;
}

原生弹窗dialog的使用​

属性方法​

原生弹窗dialog的使用

属性方法