<dialog> 元素构建器 - 模态框与表单集成

让我们从创建最简单的模态对话框开始：

设置标题：在左侧属性面板的"对话框标题"输入框中，输入对话框的标题文本，例如"确认删除"。标题会立即更新到预览区域的对话框中。

编辑内容：点击预览区域中对话框的内容区域，输入对话框的主体内容，例如"确定要删除这个项目吗？此操作不可撤销。"。

选择模式：在"打开方式"区域，确保选择了"模态（showModal）"选项。这是最常用的对话框类型。

预览效果：点击预览区域下方的"打开对话框"按钮，观察模态对话框的打开效果。对话框会以动画形式显示在屏幕中央，同时显示半透明的 backdrop 遮罩层。

关闭对话框：点击对话框标题右侧的关闭按钮（X 图标），或点击 backdrop 遮罩层，观察对话框的关闭效果。

表单集成是对话框最常见的应用场景之一：

启用水单集成：在左侧属性面板中，开启"表单集成"开关。对话框的内容区域会自动切换为表单布局，包含表单字段容器和提交按钮。

设置 method：选择表单的提交方法。对于数据提交场景，选择 POST；对于搜索筛选场景，选择 GET。

设置 action：输入表单的提交目标 URL。如果需要在前端处理数据，可以留空并在 JavaScript 中阻止默认提交行为。

预览表单：点击"打开对话框"按钮，观察表单布局的显示效果。对话框中会显示表单字段和提交/取消按钮。

测试提交：在对话框的表单中输入一些数据，然后点击提交按钮。观察工具生成的 JavaScript 代码如何处理表单数据（FormData 提取、控制台输出）。

灵活的关闭方式配置可以提升用户体验：

关闭按钮：默认启用标题栏的关闭按钮。如果需要移除此按钮（强制用户通过特定操作关闭对话框），在属性面板中禁用"关闭按钮"开关。

Backdrop 点击：在"关闭方式"区域，启用"点击 backdrop 关闭"选项。启用后，用户点击半透明的遮罩层即可关闭对话框。

ESC 键：模态对话框默认支持 ESC 键关闭。此行为由浏览器自动处理，无需额外配置。在代码区域可以看到相关的说明。

formmethod="dialog"：在表单集成模式下，取消按钮会自动设置 formmethod="dialog" 属性。点击取消按钮会关闭对话框而不提交表单数据。

测试关闭：在预览区域，分别测试每种关闭方式是否正常工作。确保所有配置的关闭方式都能正确关闭对话框。

backdrop 样式是对话框视觉效果的重要组成部分：

背景颜色：在"样式定制"区域，使用颜色选择器设置 backdrop 的背景颜色。默认为黑色，可以更改为任何颜色。尝试设置为蓝色或红色，观察视觉效果的变化。

透明度调整：拖动透明度滑块，调整 backdrop 的不透明程度。透明度为 0 时完全透明，为 1 时完全不透明。推荐值为 0.4-0.6。

模糊效果：调整模糊半径滑块，为 backdrop 添加毛玻璃效果。模糊半径为 0 时无模糊，增大数值会产生越来越强的模糊效果。

过渡动画：选择 backdrop 的进入动画类型（淡入、缩放或滑动）和动画时长。动画效果会在对话框打开和关闭时自动触发。

预览效果：每次调整样式参数后，点击"打开对话框"按钮预览最新的 backdrop 效果。观察不同参数组合下的视觉差异。

完成所有配置后，将代码应用到实际项目中：

查看 HTML 代码：切换到 HTML 标签页，查看生成的 dialog 元素结构。代码包含 dialog 标签、header、body、footer 区域以及表单（如果启用了表单集成）。

查看 CSS 代码：切换到 CSS 标签页，查看对话框和 backdrop 的样式定义。代码使用 ::backdrop 伪元素设置遮罩层样式，使用 dialog 选择器设置对话框样式。

查看 JavaScript 代码：切换到 JavaScript 标签页，查看打开对话框、关闭对话框和处理表单提交的脚本代码。代码包含事件监听器设置和方法调用。

复制代码：点击每个标签页的"复制"按钮，将代码复制到剪贴板。建议分别将 HTML、CSS 和 JavaScript 代码粘贴到对应的文件中。

集成到项目：将 HTML 代码添加到页面结构中，CSS 代码添加到样式表中，JavaScript 代码添加到脚本文件中。确保文件路径和引用关系正确。