对话框和模态是大多数Web应用程序的组成部分。虽然手工构建它们并不是一项复杂的任务，但对任何Web开发者来说，这都是一项迅速变得乏味的任务。通常情况下，手工构建对话框的替代方法是使用由其他人构建的组件。
不过，这种方法有几个问题。有这么多的选择，很难知道哪种组件是最好的，而且定制这种组件的外观有时会和手工建立一个对话框一样乏味。幸运的是，还有另一种选择：HTML对话元素。
对话框元素是什么？
HTML对话元素是一个内置的HTML标签（如div或span），它允许开发人员创建自定义的对话框和模态。对话框元素自2014年以来一直存在于Chrome和Opera中，但最近才被所有主要浏览器所支持。
为什么使用对话框元素？
使用对话框元素的主要原因是方便。它使构建对话框变得很容易，这些对话框既可以内联显示，也可以作为模版显示，只需一个HTML标签和几行JavaScript即可。
对话框元素消除了建立和调试自定义对话框的需要，或者导入别人的组件。它也很容易用CSS进行设计。
浏览器对对话框元素的支持
不幸的是，浏览器对对话框元素的支持可能会更好。截至2022年3月，所有主要浏览器的最新版本都支持它，但有一些注意事项。
任何早于Firefox 98的Firefox浏览器只有在浏览器设置中手动启用时才会支持它，而任何早于Safari 15.4的Safari版本根本不支持它。完整的浏览器支持细节可在caniuse上找到。
值得庆幸的是，这并不意味着对话元素无法使用。谷歌Chrome浏览器团队维护了一个对话框元素的多元填充，你可以在Github上找到，即使在不支持该元素的浏览器上，也能对其提供支持。
在目前的形式下，对话框元素可能存在可访问性问题，所以在生产应用中使用一个自定义的对话框组件（如a11y-dialog）可能更合适。
如何使用对话框元素
为了演示如何使用对话框元素，你将使用它来构建一个常见的网站功能：一个删除按钮的确认模式。
所有这些都需要遵循的是一个单一的HTML文件。
1.设置HTML文件
从创建上述文件开始，并将其命名为index.html。
接下来，建立HTML文件的结构，并提供一些关于页面的基本元信息，以便在所有设备上正确显示。
在index.html中键入以下代码。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dialog demo</title></head> <style></style> <body></body> <script></script></html>
这就是这个项目所需的所有设置。
2.编写标记
接下来，为删除按钮以及对话框元素编写标记。
在index.html的body标签中键入以下代码。
<div class="button-container"> <button> Delete item </button> </div><dialog> <div> Are you sure you want to delete this item? </div> <div> <button class="close"> Yes </button> <button class="close"> No </button> </div></dialog>
上面的HTML将创建。
- 一个删除按钮。
- 对话框元素。
- 对话框内的两个按钮。
如果在浏览器中打开index.html，屏幕上唯一可见的元素将是删除按钮。这并不意味着有什么问题，对话框元素只是需要一点JavaScript来变得可见。
3.添加JavaScript
现在，编写当用户点击删除按钮时打开对话框的代码，以及让对话框关闭的代码。
在index.html的脚本标签中键入以下内容。
const modal = document.querySelector("dialog")document.querySelector(".button-container button").addEventListener("click", () => { modal.showModal();});const closeBtns = document.getElementsByClassName("close");for (btn of closeBtns) { btn.addEventListener("click", () => { modal.close(); })}
这段代码使用querySelector方法来获得对按钮和对话框的引用。然后，它为每个按钮附加了一个点击事件监听器。
你可能对JavaScript中的事件监听器很熟悉，你可以自己使用。附在删除按钮上的事件监听器在按钮被点击时调用showModal()方法来显示对话框。
模态内部的每个按钮都有一个附加的事件监听器，当它们被点击时，使用close()方法来隐藏对话框。
即使代码中没有调用close()方法的JavaScript，用户也可以通过按下键盘上的escape键来关闭模态。
现在这个JavaScript已经到位了，如果用户点击了删除按钮，模态就会打开，点击是或否按钮就会关闭模态。
这就是打开的模态应该是的样子。
值得注意的一点是，尽管index.html中没有CSS，但对话框元素已经有了一些样式。模态已经居中，它有一个边框，宽度被限制在内容范围内，并且有一些默认的填充。
当模态打开时，用户不能与后台的任何东西交互（点击、选择）。
对话框元素也可以作为页面流程的一部分显示，而不是作为一个模态。要尝试它，请像这样改变JavaScript中的第一个事件监听器。
document.querySelector(".button-container button").addEventListener("click", () => { modal.show(); });
这段代码中唯一的变化是，代码调用了show()方法，而不是showModal()方法。现在，当用户点击删除项目的按钮时，模态应该像这样内联打开。
4.添加样式
接下来，通过编写CSS来定制对话框的外观和背景。
CSS将减少对话框的边框，限制其最大宽度，然后使背景变暗，以及为按钮添加一点样式。
对话框本身的样式设计是直接的，但背景伪类对于添加针对对话框背景的样式设计是必要的。
把下面的代码粘贴到index.html的样式标签中。
dialog::backdrop { background: black; opacity: 0.5;}button { border-radius: 2px; background-color: white; border: 1px solid black; margin: 5px; box-shadow: 1px 1px 2px grey;}dialog { max-width: 90vw; border: 1px solid black;}
当对话框打开时，它现在应该看起来像这样。
这样你就建立了一个功能齐全的对话框。
对话框元素是构建模态的好方法
使用最近获得所有主要浏览器支持的HTML对话元素，网络开发者现在可以通过一个HTML标签和几行JavaScript来构建功能齐全、易于定制的模态和对话框，而不需要依赖第三方的解决方案。
对话框元素有一个由谷歌浏览器团队维护的多元填充，允许开发者在不支持它的浏览器版本中使用对话框。
