跳到主要内容

dialog

2023年06月11日
柏拉文
越努力，越幸运

一、认识​

<dialog> 元素表示一个对话框或其他交互式组件，例如一个可关闭警告、检查器或者窗口。

二、语法​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <dialog id="bolawen-dialog">
      <p>这是一个很寂寞的天，下着有些伤心的雨！</p>
      <button id="bolawen-button-confirm">确认</button>
    </dialog>
    <button id="bolawen-button">显示</button>
    <script>
      const button = document.querySelector('#bolawen-button');
      const dialog = document.querySelector('#bolawen-dialog');
      const dialogConfirm = document.querySelector('#bolawen-button-confirm');

      button.addEventListener('click', function () {
        dialog.showModal();
      });

      dialogConfirm.addEventListener('click', function () {
        dialog.close();
      });
    </script>
  </body>
</html>

三、属性​

3.1 open​

四、方法​

4.1 show()​

dialog.show() 渲染非模态弹窗

4.2 close()​

4.3 showModal()​

dialog.showModal() 渲染模态弹窗, 允许其被 Escape 关闭