HTML5的Dialog元素有什么用？如何创建模态框？

<dialog id="myDialog">
  <p>这是一个对话框！</p>
  <button id="closeBtn">关闭</button>
</dialog>

<button id="openBtn">打开对话框</button>

<script>
  const dialog = document.getElementById('myDialog');
  const openBtn = document.getElementById('openBtn');
  const closeBtn = document.getElementById('closeBtn');

  openBtn.addEventListener('click', () => {
    dialog.showModal(); // 使用 showModal() 创建模态对话框
  });

  closeBtn.addEventListener('click', () => {
    dialog.close();
  });
</script>

dialog {
  border: 1px solid black;
  border-radius: 5px;
  padding: 1em;
  background-color: #f0f0f0;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

<dialog id="myFormDialog">
  <form id="myForm">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name"><br><br>
    <button type="submit">提交</button>
    <button type="button" id="cancelBtn">取消</button>
  </form>
</dialog>

<button id="openFormBtn">打开表单对话框</button>

<script>
  const formDialog = document.getElementById('myFormDialog');
  const openFormBtn = document.getElementById('openFormBtn');
  const myForm = document.getElementById('myForm');
  const cancelBtn = document.getElementById('cancelBtn');

  openFormBtn.addEventListener('click', () => {
    formDialog.showModal();
  });

  myForm.addEventListener('submit', (event) => {
    event.preventDefault(); // 阻止默认提交行为

    const formData = new FormData(myForm);

    fetch('/your-api-endpoint', {
      method: 'POST',
      body: formData
    })
    .then(response => {
      // 处理响应
      console.log('提交成功！');
      formDialog.close();
    })
    .catch(error => {
      // 处理错误
      console.error('提交失败：', error);
    });
  });

  cancelBtn.addEventListener('click', () => {
    formDialog.close();
  });
</script>

npm install dialog-polyfill

import dialogPolyfill from 'dialog-polyfill';

const dialog = document.querySelector('dialog');

if (! dialog.showModal) {
  dialogPolyfill.registerDialog(dialog);
}