模态与对话框

你知道模态和对话框的区别吗？

没有？！让我们来了解一下

模态和对话框之间的区别

在用户界面 (UI) 设计中，术语“模态”和“对话框”经常互换使用，但它们具有不同的含义：

模态：

• 定义：模态是一种用户界面元素，它在应用程序中创建临时的中断状态，要求用户与其交互才能返回到底层内容或应用程序。
• 主要功能：阻止与界面其余部分的交互，直到关闭或与之交互。强制用户专注于模式的内容并采取行动（例如确认决定或填写表格）。
• 常见用例：
  • 确认请求（例如“您确定要删除此内容吗？”）
  • 警报或错误消息
  • 身份验证屏幕（例如登录屏幕）
  • 在继续之前选择基本选项（例如“保存更改？”）
• 示例：“保存更改？”在许多应用程序中，您必须单击“是”、“否”或“取消”才能继续其他任务。

对话：

• 定义：“对话框”是一个更广泛的术语，指任何允许与用户交互的用户界面元素，通常涉及交换信息或做出决策。它可能是也可能不是模态的。
• 主要功能：不一定会阻止与界面其余部分的交互。对话框可以是模态的，但也可以是非模态的，即用户可以在对话框打开时继续与应用程序的其他部分进行交互。
• 常见用例：
  • 请求用户输入（例如搜索对话框或设置）
  • 信息显示（例如错误消息、警报）
  • 复杂的表格或多步骤的流程
• 示例：文字处理器中的对话框，要求特定参数（例如字体大小或格式），但如果它是非模式对话框，则允许您与应用程序的其他元素进行交互。

主要区别：

• 互动屏蔽:

  • 模式会阻止与主界面的交互，直到它被关闭。
  • 对话可能会也可能不会阻止交互；这取决于它是模态对话框还是非模态对话框。

• 用例：

  • 模态框用于关键决策、警报或操作，要求用户在继续之前先关注模态框的内容。
  • 对话框可用于各种交互，包括显示信息、提交表单或选择选项，无论是否阻塞主界面。

---

HTML 中的对话框元素简介

HTML 提供了一种简单而有效的方法来创建模式和对话框。该元素非常灵活，除了提供开箱即用的可访问性优势之外，还允许您自定义内容和样式。让我们探讨一下它的工作原理以及如何使用它在网页上创建有效的模式。

基本结构

它非常简单：它只是一个带有可选属性和一些关联 JavaScript 方法的 HTML 标记。查看基本使用示例：

<dialog>
  <!-- Conteúdo do Dialog -->
</dialog>

默认情况下，对话框是隐藏的。要显示它，可以添加 open 属性，但建议使用 JavaScript show() 和 showModal() 方法来控制对话框的打开：

<dialog open>
  <span>Você pode me ver agora!</span>
</dialog>

但是，不建议直接使用 open 属性，因为这会创建非模式对话框。相反，您应该使用 JavaScript 方法：

const dialog = document.querySelector("dialog");
dialog.show(); // Abre um diálogo não-modal
dialog.showModal(); // Abre um diálogo modal

showModal() 方法打开一个模态对话框，而 show() 打开一个非模态对话框（一种弹出窗口）。

关闭对话框

要关闭对话框，可以使用 close() 方法。此外，如果对话框是模态的，可以通过按 Esc 键关闭它：

const dialog = document.querySelector("dialog");
dialog.close(); // Fecha o diálogo

自动辅助功能

的一大优点是是它自动处理辅助功能。它应用正确的 aria 属性并管理焦点，从而更轻松地创建可访问的应用程序。

设置对话框元素的样式

尽管它已经附带了浏览器应用的一些默认样式，很容易对其进行自定义。以下是使用一些基本 CSS 属性设置样式的对话框示例：

dialog {
  z-index: 10;
  margin-top: 10px;
  background: green;
  border: none;
  border-radius: 1rem;
}

此外，您可以使用 ::backdrop 伪元素设置模式背景的样式。要修改背景（模态后面的区域），您可以应用以下 CSS：

<dialog>
  <!-- Conteúdo do Dialog -->
</dialog>

这可以轻松创建适合您网站设计的自定义模式。

对话框元素的高级功能

• 对话框中的表单 您可以在对话框中使用表单。如果在表单上设置method=“dialog”属性，则提交表单时对话框将自动关闭，而不实际将表单数据发送到服务器。最有趣的是，当您重新打开对话框时，表单数据仍然存在。

<dialog open>
  <span>Você pode me ver agora!</span>
</dialog>

• 取消按钮 您可以使用 formmethod="dialog" 属性向表单添加一个取消按钮，以关闭对话框而不提交表单：

const dialog = document.querySelector("dialog");
dialog.show(); // Abre um diálogo não-modal
dialog.showModal(); // Abre um diálogo modal

• 点击即可关闭 尽管本身没有这种行为，很容易添加一个单击事件侦听器来在用户单击离开对话框时关闭对话框。这是一个实现此功能的简单示例：

const dialog = document.querySelector("dialog");
dialog.close(); // Fecha o diálogo

此解决方案允许在模态区域外部单击时关闭对话框，这是许多模态中的常见行为。

---

结论

HTML 提供了一种简单而强大的方法来实现模式和对话框，并重点关注可访问性。它可以轻松创建自定义模式，无需外部库或复杂的配置。使用 show()、showModal() 和 close() 等方法，您可以轻松控制对话框的行为。

此外，使用 CSS 设置对话框及其背景样式的能力使其更加可定制。只需一些附加功能，例如在单击时关闭模式或集成表单，

就可以满足您的需求。成为在您的网站上创建交互元素的高度灵活且有用的工具。

---

有关更多信息和示例：https://blog.webdevsimplified.com/2023-04/html-dialog/
https://dev.to/iam_timsmith/dialogs-vs-modals-is-there-a-difference-210k

以上是模态与对话框的详细内容。更多信息请关注PHP中文网其他相关文章！