模态对话框与普通对话框的区别讲解

咋了？看看吧

在用户界面（UI）设计中，术语“模态窗口”和“对话框”经常被混淆使用，但它们有不同的含义。

模态:

• 定义 ：模态窗口是一种 UI 元素，它会在应用程序中创建一个临时中断状态，要求用户与之交互后才能返回到底层内容或应用程序。
• 关键特性 ：阻止用户与界面其他部分交互，直到它被关闭或被交互。这强制用户专注于模态窗口内容并采取行动（例如确认决定或填写表单）。

• 常见用例 ：

• 确认提示（例如，“你确定要删除此内容吗？”）

• 警告或错误消息

• 身份验证对话（例如，登录界面）

• 选择在继续之前必须处理的重要操作（例如，“保存更改？”）
• 示例 ：许多应用程序中的“保存更改？”对话框，你必须点击“是”，“否”或“取消”后才能继续执行其他操作。

下面是一段对话:

• 定义：一个 对话框 是一个更广泛的术语，用于指任何允许用户交互的 UI 元素，通常涉及信息交换或决策制定。对话框可以是模态的，也可以是非模态的。
• 关键特性：不一定阻止用户与界面其他部分的交互。这意味着用户可以在对话框打开时与应用程序的其他部分进行交互。

• 常见用例：

• 请求用户输入（例如，搜索或设置对话框）

• 信息展示（例如，错误消息，警告）

• 复杂表单或多步骤流程
• 示例：在文字处理程序中弹出一个对话框，请求特定参数（例如字体大小或格式化）。即使对话框是打开的，用户仍然可以与应用程序的其他部分进行交互。

主要的不同：

1. 交互干扰：

• 一个模态框会阻塞与主界面的交互，直到它被关闭。

• 一个窗口可能阻塞也可能不阻塞交互；这要看它是模态还是非模态的。

  1. 使用场景：
• 模态框 用于关键决策、警告等情况，需要用户在继续之前专注于模态框中的内容。
• 对话框 可用于各种交互方式，包括信息展示、提交表单或选择选项等，可以选择阻塞或不阻塞主界面。

HTML 中的 dialog 元素介绍

HTML 的 dialog 元素提供了一种简单且高效的方式来创建模态窗口（模态对话框）。这个元素非常灵活，允许你自定义内容和样式，同时还能提供内置的无障碍功能。让我们来看看它是怎么用的，以及如何用它在网页上创建有效的模态窗口。

基本结构

dialog 元素非常简单易懂：它只是一个普通的 HTML 标签，带有可选属性并可以调用一些相关 JavaScript 方法。例如：这里是一个基本的用法示例：

    <对话>
      <!-- -->
    </对话>

切换到全屏模式，退出全屏

默认情况下，一个 dialog 是隐藏的。要显示它，可以添加 open 属性，但这种方法不推荐。建议使用 JavaScript 方法 show() 和 showModal() 来控制对话的显示。

    <dialog 打开>
      <span>你现在能看见我啦！</span>
    </dialog>

切换到全屏，退出全屏

不过，不建议直接使用这个 open 属性，因为它会创建一个非模态窗口。你应该使用 JavaScript 方法：

const dialog = document.querySelector("dialog");
dialog.show(); // 显示一个非模态对话框
dialog.showModal(); // 显示一个模态对话框

点击进入全屏 点击退出全屏

showModal() 方法打开一个模态对话框，而 show() 则打开一个非模态的弹出式窗口。

关闭对话框

你可以使用 close() 方法来关闭一个弹窗。此外，如果弹窗是模态窗口，也可以通过按 Esc 键来关闭。

    const dialog = document.querySelector("dialog");
    dialog.close(); // 关闭这个对话框

全屏 退出

自动辅助功能（Accessibility Features）

dialog 元素的一个优点是它自动支持无障碍特性。它自动添加正确的 aria 属性并自动管理焦点，使得创建无障碍应用变得简单很多。

美化 对话框 元素

虽然 dialog 元素自带了一些由浏览器应用的默认样式，但很容易自定义。这里是一个使用了一些基本 CSS 属性的对话框示例：

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

对话框样式设置，包括z-index, 顶部边距, 背景颜色, 边框样式和圆角等。这段代码是用来设置对话框的样式，包括它的位置，颜色和形状等。

全屏 退出全屏

此外，你可以通过使用 ::backdrop 伪元素来改变模态框的背景。要修改模态框后面的区域，你可以使用以下 CSS 代码：

    dialog::backdrop {
      background-color: rgba(250, 100, 250, 0.25); /* 半透明的紫色 */
    }

进入全屏模式。退出全屏模式。

这让你很容易创建符合你的网站风格的弹窗。

dialog 元素的高级特性

1. 对话框中的表单

你可以在对话框内使用表单。如果你在表单上设置了 method="dialog" 属性，那么在提交表单时对话框会自动关闭，而不会实际提交表单数据到服务器。最酷的部分是，当你再次打开对话框时，表单数据仍然存在。

    <对话框>
      <表单方法 method="dialog">
        <输入框 type="text" placeholder="请输入内容" />
        <提交按钮 type="submit">提交</提交按钮>
      </表单方法>
    </对话框>

全屏 退出全屏

1. 取消按钮

你在表单中添加一个取消按钮，该按钮可以在不提交表单的情况下关闭对话框，通过使用 formmethod="dialog" 属性。

    <dialog>
      <form>
        <input type="text" />
        <button formmethod="dialog" type="submit">取消</button>
        <button type="submit">提交</button>
      </form>
    </dialog>

点击全屏按钮可以切换到全屏或退出全屏

1. 点击外部即可关闭

虽然dialog元素本身并没有这种功能，但你可以很容易地添加一个点击事件侦听器，当用户点击对话框外部的时候，就可以关闭对话框。这里有一个简单的例子来实现这个功能

    dialog.addEventListener("click", e => {
      const dialogDimensions = dialog.getBoundingClientRect();
      // 如果点击位置在对话框之外
      if (
        e.clientX < dialogDimensions.left ||
        e.clientX > dialogDimensions.right ||
        e.clientY < dialogDimensions.top ||
        e.clientY > dialogDimensions.bottom
      ) {
        // 关闭对话框
        dialog.close();
      }
    });

全屏 全屏退出

这个解决方案允许在点击模态框外时关闭对话，这种行为在许多模态框中很常见。

最后的结论

HTML 的 dialog 元素提供了一种简单而强大的方式来实现模态窗口和对话框功能，特别强调可访问性。它使创建自定义模态窗口变得简单且无需额外的库或复杂的设置。通过使用诸如 show()、showModal() 和 close() 这样的方法，您可以轻松地控制对话框的行为，如显示或关闭。

此外，使用CSS对对话框及其背景进行样式的控制能力使其更加可定制。只需添加几个额外功能，如点击外部区域可关闭对话框或集成表单，dialog 元素就成为了一个高度灵活和有用的工具，可用于创建网站上互动元素。

更多详情和例子，请参阅：https://blog.webdevsimplified.com/2023-04/html-dialog/
https://dev.to/iam_timsmith/dialogs-vs-modals-is-there-a-difference-210k