模态和非模态

模态对话框（Modal Dialog）

  • 阻止背景交互：当模态对话框打开时，它会阻止用户与对话框之外的应用程序其他部分进行交互，直到对话框被关闭。
  • 强制用户响应：通常用于需要用户必须完成或取消某个操作才能继续的情况，比如确认删除、填写重要信息等。
  • 示例：浏览器中的 alert()、confirm()、prompt() 都是模态的。

非模态对话框（Non-modal Dialog）

  • 允许背景交互：非模态对话框打开时，用户仍然可以与应用程序的其他部分进行交互，对话框不会阻止用户操作其他部分。
  • 不强制立即响应：通常用于提供辅助信息或工具，用户可以不理会它而继续其他工作，比如查找/替换对话框、调色板等。

属性

closedby

  • any
  • closerequset
  • none

一种是轻量级关闭用户操作 ，即当用户点击或轻触对话框外部时，

会自动关闭
一种是平台特定的用户操作 ，例如在桌面平台上按下 Esc 键，或在移动平台上执行“返回”或“关闭”手势。
一种是开发者指定的机制，通过 JavaScript 调用 close() 方法，或者通过 form 的提交

any: 任何用户操作都可以关闭对话框
closerequset: 只能平台特定的用户操作关闭对话框或者开发者指定的机制
none: 只能开发者提供机制关闭对话框
默认值在不指定 closedby 时，模态框是 closerequest，非模态框是 none

open

  • boolean
  • default: false
  • true: 打开对话框
  • false: 关闭对话框

设置 open 属性打开的对话框，是非模态的

使用说明

使用表单关闭

在

内使用
时，提交表单会关闭对话框、保存表单状态，并将 returnValue 设置为触发按钮的 value。这是一种优雅的无 JS 关闭方式。

模态框的背景设置

模态框的背景设置通过 ::backdrop 伪元素来实现，当使用 HTMLDialogElement.showModal() 方法显示对话框时，该背景会显示在

元素后面。例如，可以使用此伪元素模糊、变暗或以其他方式遮蔽模态对话框后面的静态内容。

模态框聚焦

应将 autofocus 属性添加到用户在打开模态对话框后需要立即交互的元素上。如果没有其他元素需要立即交互，建议将 autofocus 添加到对话框内的关闭按钮，或者如果用户需要点击/激活对话框来关闭它，则添加到对话框本身。