HTML5Dialog创建模态框教程

如何在 Dialog 中处理表单提交？

在对话框中处理表单提交需要一些额外的注意。默认情况下，表单提交会导致页面刷新，这可能不是你想要的行为。

一种常见的做法是使用 JavaScript 阻止表单的默认提交行为，并使用 AJAX 将表单数据发送到服务器。

  

    姓名：
    


    提交
    取消
  


打开表单对话框

在这个例子中，我们监听了表单的 submit 事件，并调用 event.preventDefault() 来阻止默认的提交行为。然后，我们使用 FormData 对象获取表单数据，并使用 fetch API 将数据发送到服务器。

取消按钮也需要单独处理，确保关闭对话框的同时，不会触发表单提交。

如何优雅地处理 Dialog 的兼容性问题？

虽然

npm install dialog-polyfill

import dialogPolyfill from 'dialog-polyfill';

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

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