前端开发攻略---介绍HTML中的＜dialog＞标签，浏览器的原生弹框。

news2024/11/15 19:51:49

1、演示

2、介绍

<dialog> 标签用于定义对话框，即一个独立的窗口，通常用来显示对话框、提示框、确认框等弹出式内容。在对话框中，可以包含文本、表单元素、按钮等内容，用户可以和这些内容进行交互。

3、兼容性

4、示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #dialog {
        border: 0;
        width: 500px;
        height: 500px;
        border: 1px solid #000;
      }

      #dialog::backdrop {
        background-color: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(1px);
      }
    </style>
  </head>
  <body>
    
    <button class="openBtn">弹窗</button>

    <dialog id="dialog">
      <div class="win">
        <p>这是一个弹框！！！</p>
        <p><input type="text" /></p>
        <p><input type="text" /></p>
        <button class="closeBtn">关闭</button>
      </div>
    </dialog>
  </body>
  <script>
    const dialog = document.getElementById('dialog')
    const openBtn = document.querySelector('.openBtn')
    const closeBtn = document.querySelector('.closeBtn')
    dialog.addEventListener('close', function (e) {
      console.log('弹框关闭了')
    })
    openBtn.addEventListener('click', function () {
      // dialog.show
      dialog.showModal()
    })
    closeBtn.addEventListener('click', function () {
      dialog.close()
    })
  </script>
</html>
open 属性：设置该属性为 true 时，对话框会默认打开显示，为 false 时则关闭。可以使用 JavaScript 来动态改变这个属性来控制对话框的显示状态。

showModal() 方法：调用该方法可以以模态的形式显示对话框，即使用户点击其他部分页面也无法操作。一般在需要用户做出重要选择或者确认时使用。

show() 方法：调用该方法可以显示对话框，但允许用户在显示的同时与页面上其他元素交互。

close() 方法：调用该方法可以关闭对话框。

::backdrop：通过改伪元素的方式修改模态背景。