对话框，也被称为模态对话框，是一个弹出框，在网页加载时或点击任何按钮时出现在网页上。模态对话框是用户界面的一个组成部分，有很多用途，包括警报和通知弹出、表单、确认框、消息框等等。
在创建对话框时，使用JavaScript是很重要的，因为JavaScript为网站增加了互动性，而对话框则用于用户互动。根据网站的平台，我们可以使用不同的JavaScript库来生成对话框。例如，如果我们使用React，react-modal是一个广泛使用的库。如果我们使用Bootstrap，我们可以使用它的一些类来创建一个对话框，如modal、modal-content、modal-body等。
在一个网络项目中使用第三方JavaScript库并不总是一个好的解决方案，因为它增加了应用程序的整体大小。此外，下载完整的库来使用它所提供的特定功能并不是一个好主意，因为它增加了页面的加载时间，阻碍了终端用户的体验。
作为一名自由职业者，经常会有为网站添加对话框的时候。我的一个客户分配了一个项目，要求我在支付页面上创建一个对话框。在这种情况下，我使用HTML对话框元素而不是其他第三方库来实现这个对话框，因为只需几行HTML、CSS和JavaScript就能轻松实现。谁愿意以沉重的库为代价来妨碍最终用户的体验呢:)。由于许多客户喜欢使用HTML5，所以在这篇关于HTML对话框元素样式的博客中，我们将使用HTML5。
在本篇关于HTML对话框元素的CSS教程结束时，你将能够使用一个叫做对话框的HTML元素来创建和设计对话框。这个选择的最大好处是，你不需要额外的包。
所以，让我们开始吧......
对话框的一般结构
上图是Austin BeerWorks公司使用的一个对话框模版，用于准许最低年龄为21岁的网站用户访问。如果用户选择 "否"，他们就不能访问该网站，因为这是一个啤酒公司的网站。许多网站使用类似的对话框，用于显示重要信息、用户确认等各种目的。
下面的图片显示了对话框的一般结构。
通常情况下，对话框由页眉、正文、页脚和背景组成。头部包括标题，它应该是清晰和简洁的，因为它是用户在页面上出现对话框时首先注意到的东西。
主体包括描述，而页脚链接到网站上必要的占位符（例如，关于我们、团队、联系我们等）。背景盖是低不透明度的黑色，但你可以根据你的需要添加任何颜色。
< dialog >HTML中的元素
HTML引入了新的对话框元素来创建网站上的模态对话框。使用对话框元素创建对话框是非常容易的。对话框中要显示的内容必须保持在 < dialog >和 < /dialog >标签。
以前，Safari不支持它，但现在连Safari也支持它。下面是所有主要浏览器的浏览器兼容性得分。
对话框元素的基本标记在这个CodePen中显示。
参见CodePen上Sampurna Chapagain (@Sampurna) 的Pen
dialog-basic markup。
在上面的CodePen中，我们使用了包含一个段落的对话框元素，但它是不可见的。如果我们看到浏览器的控制台，对话框元素默认会添加一些CSS。默认情况下，对话框是隐藏的。我们需要添加一个额外的属性来使其可见，我们将在下面讨论。
我们可以看到，它在现有的CSS中加入了display: none属性。
为了使对话框出现在网页上，我们需要添加这个CodePen中显示的open属性。
请看CodePen上Sampurna Chapagain（@Sampurna）
的Pendialog-open属性。
对话框元素使用了一个开放属性，它是布尔 型的。打开属性将对话框元素设置为活动状态，并允许用户与之交互。如果我们不指定open属性，我们将需要添加JavaScript，让我们打开和关闭对话框。
添加JavaScript是更好的方法，因为可以用它来创建交互式对话框。JavaScript中的show()或showModal()方法有助于显示我们将在本博客后面讨论的HTML对话元素的对话框。
这就是我们添加了open属性后，HTML对话框元素在浏览器中的样子。另外，现在我们可以看到那些对话框属性在CSS中被激活。
测试HTML对话框元素的浏览器兼容性。现在就试试LambdaTest!
HTML 对话框元素的 API
有一些JavaScript API可以与HTML对话元素一起使用，以显示和隐藏对话框。
-
dialog.show()
HTML对话元素的显示方法用于在网页上显示对话。在这里，dialog引用了名为dialog的HTML元素，所以根据你在dialog元素上使用的id和class，它可以是任何东西。 -
dialog.close()
HTML对话框元素的close方法被用来关闭对话框。通常情况下，如果用户不想进一步进行对话框操作，继续与网站互动，就会关闭对话框。
以上两种方法的例子可以在本CodePen中找到。
参见CodePen上Sampurna Chapagain (@Sampurna)
的Pen
dialog.show()。
dialog元素支持全局属性、可用于所有HTML元素的属性（如class、id、style、title、hidden等）、事件属性，以及让你执行多个事件的属性（如onchange、onsubmit、onclick、onfocus）。这个例子已经在本CodePen中展示了。
参见CodePen上Sampurna Chapagain (@Sampurna)
的Pen
dialog.show()。
上面的例子使用onClick 事件属性来打开和关闭HTML对话元素。
dialog.show() vs dialog.showModal()
根据不同的使用情况，我们可以创建两种不同类型的对话框。一种是只显示对话框，隐藏网站内容；另一种是在网站内容旁边显示对话框。
我们将通过这两种不同的HTML对话框元素。
dialog.show()
这个方法显示对话框，并允许用户与网站内容互动。通常情况下，使用这种方法创建的对话框被称为非模式对话框。例如，Gmail使用非模式对话框来撰写新的电子邮件，如下图所示。
当撰写 新邮件的对话框打开时，用户仍然可以查看其他功能，如导航到收件箱、访问垃圾邮件等。我们已经在博客中介绍了一个例子，演示了dialog.show() 在HTML对话框元素中的用法。
dialog.showModal()
该方法用于通过添加背景罩来显示对话框，使用户无法与网站进行交互。
网站的内容只有在与对话框互动后才能被用户看到。例如，LambdaTest在开始页使用了一个带有背景罩的对话框。
你可以在这个CodePen中找到**对话框.showModal()**方法的例子。
参见CodePen上Sampurna Chapagain(@Sampurna)的Pen
dialog-showModal()。
如何通过HTML对话元素处理用户输入？
如果你有使用HTML的经验，你可能听说过表单标签。通常，我们使用表单标签将用户信息用GET或POST方法传递给一个指定的URL。
但是，我们也可以在HTML对话框元素里面使用表单元素，其方法是导致表单提交关闭的对话框。而这将返回表单输入的值给生成对话框的提交按钮。
当我们想通过对话框获得用户信息时，这个功能很方便，比如显示登录或注册表格的对话框。
这里有一个CodePen，展示了如何在HTML对话框元素中使用表单元素来获取用户输入的信息。
请看CodePen上Sampurna Chapagain (@Sampurna)
的Pen
在 对话元素内使用表单。
现在让我们来理解上述CodePen的代码库。
我们在HTML对话框元素中使用表单元素，其方法设置为dialog。在表单元素里面，有一个输入字段。通过点击提交用户对话框按钮来打开对话框。表单在这里被显示为一个对话框。当用户通过点击确认按钮提交表单时，输入值会显示在网页上。可以通过点击关闭按钮来关闭该对话框。
如何禁止在按下Esc键时关闭HTML对话元素？
默认情况下，你可以通过按ESC键来关闭对话框。但是，如果你想禁用这个功能，你只需添加几行JavaScript代码就可以做到，如下图所示。
在这里，我们使用getElementById()方法来返回带有dialogBox id的元素。在showDialog()函数中，我们使用addEventListener()方法为dialogBoxId附加一个事件处理程序，它使用了keydown事件。而条件e.key ==="Escape "可以防止通过按ESC键关闭对话框的默认行为。
你可以在这个CodePen中找到这个演示。
请参阅CodePen上Sampurna Chapagain (@Sampurna) 的Pen
Untitled。
如何改变< dialog >'s backdrop?
如上所述，dialog.showModal()方法显示的背景罩的默认颜色是低透明度的黑色。你可以使用::backdropCSS属性轻松修改对话框背景的CSS。这个默认的**::backdrop**CSS属性可以阻止用户与网站上的其他内容进行交互，这意味着除了对话框模版之外的其他网站内容不能被选择、点击或聚焦。
默认情况下，它占据了整个网页内容。你可以根据你的需要，为背景罩添加不同的动画。你也可以使用backdrop-filter属性来模糊背景。
请看一下这个CodePen，看看它是如何工作的。
请看CodePen上Sampurna Chapagain (@Sampurna) 的Pen
backgrop cover-dialog。
如何定制HTML对话元素？
现在我们将看到如何通过使用HTML、CSS和JavaScript来定制对话框。结果将是这样的。
你可以在这个CodePen上找到完整的代码。
在CodePen上看到Sampurna Chapagain (@Sampurna) 的Pen
dialog-final。
现在，让我们来了解一下上述代码库的内容。这里，我们有四个不同的HTML对话元素。
< header >:头部元素有两个部分。一个是标题，另一个是关闭标志，当点击它时，使用**closeDialog()**方法来关闭对话框。< section >:部分元素有文本，有一些额外的描述性信息。< footer >:页脚元素有两个按钮。第一个是关闭对话框按钮，点击后调用**closeDialog()**方法来关闭对话框。< button >:我们在负责打开对话模式的部分元素中使用了按钮元素。在点击它时，它启动了**showDialog()**方法。
对于JavaScript，我们使用了文档方法，getElementById，来返回一个id为dialogBox的元素对象。在这里，我们添加了两个不同的函数，通过点击相应的按钮来显示和关闭模态。
对于样式设计，我们做了以下工作。
- 为页脚的两个按钮添加了一些CSS。
- 为页眉添加了显示：flex属性，为对话框添加了关闭标志。
- 使用盒状阴影、边框半径和边框属性对对话框进行造型。
- 使用**::backdrop**pseudo-element的background-color和backdrop-filter属性，修改了对话框背景罩的外观。
如何对HTML Dialog元素进行跨浏览器测试？
跨浏览器测试是确保我们创建的每个网站或网络应用程序都能在众多浏览器上顺利运行的过程。不同的用户使用不同版本的网络浏览器。因此，网络开发人员的工作是确保我们创建的网站或网络应用在不同版本的浏览器上正常运行。
所有最新的主要网络浏览器版本都支持HTML对话元素。但是，许多浏览器的一些旧版本不支持它。
在下面的截图中，我们将在Netlify平台上使用上述CodePen的代码，并尝试在LambdaTest提供的各种浏览器上访问它。
- 登录到LambdaTest平台。如果你还没有注册，请免费注册。
- 进入实时测试，选择浏览器测试，并优化你所需要的配置。
在LambdaTest平台上提供的实时测试功能的帮助下，这就是我们对对话框元素进行跨浏览器测试的方法。使用这个平台，我们可以做的不仅仅是对对话框元素进行跨浏览器测试。
如何用LT浏览器测试HTML对话元素？
得益于LambdaTest这样的跨浏览器测试解决方案，我们可以在一个由3000多个真实浏览器、操作系统和设备组成的在线浏览器场上进行网络测试，包括智能手机、平板电脑和台式机。这使我们能够在许多操作系统和浏览器上测试网站的响应性。
LambdaTest通过其对移动设备友好的测试工具--LT浏览器，使你的网站在多种移动设备上的测试变得简单而实惠，这个工具具有50多个预装视口（包括手机、平板电脑、台式机和笔记本电脑），让你快速检查你的网站在数千个屏幕分辨率下的响应情况。
这就是LT浏览器上的响应性测试的样子。
你也可以通过这个视频来了解LambdaTest的LT浏览器的情况。
你可以订阅LambdaTest的YouTube频道，随时了解围绕Playwright教程、Selenium自动化、Cypress自动化、CI/CD等的最新教程。
总结
在这篇关于本地HTML对话框元素的博文中，我们看到了如何使用HTML对话框元素创建一个对话框模态。我们讨论了showModal()和show()对话框方法之间的一些区别。此外，我们还经历了自定义对话框和通过对话框中的表单获得用户输入。
如果你正在寻找一个简单的解决方案，在不使用任何第三方库的情况下创建一个对话模式，那么HTML对话元素将派上用场。
现在你已经看到了如何使用HTML、CSS和JavaScript来实现对话框，你应该能够有效地使用它。我希望你喜欢阅读这篇文章，并了解了对话框元素的整体概念。
常见的问题（FAQ）
如何在HTML中制作对话？
HTML < dialog >标签被用来在网页上创建一个新的弹出式对话框。它使用一个开放的布尔属性，激活该元素并允许用户与之互动。HTML
标签是HTML5中的一个新的补充。
如何在HTML中关闭一个对话？
HTMLDialogElement接口的close()方法可以关闭对话框，并接受一个可选的字符串参数。
模态和对话框的区别是什么？
模态窗口是一个用户界面元素，它打断了用户的工作流程，迫使他们立即采取行动。对话框将系统置于不同的模式中，从而打断了他们的工作流程，使他们无法执行可能正在进行的任务。
