简要地教你使用HTML 5.2对话框

webstack • 2018年1月12日 pm11:04 • 教程 • 阅读 569

HTML对话框已经停留了一段时间，但是直到最近，它还不是W3C推荐规范的一部分。既然主流浏览器已经开始支持对话元素，我们很可能会看到它被广泛使用。本文简要介绍了我们如何使用对话框，为什么需要新的元素以及如何使用它。

什么是对话框？

对话框是一种可用于多种方式的设计模式，包括但不限于：显示重要信息，请求用户选择或扩展现有内容。虽然对话可以以不同的方式进行，但是最常用的是模态，与叠加层中的其他内容隔离。

为什么需要对话框元素？

直到新元素发布，要实现一个对话框到一个网站，你将不得不从头开始编写或使用外部库 – 这种组件没有标准的语法或默认样式。缺乏标准意味着浏览器和屏幕阅读器等辅助技术默认情况下无法区分对话框相关内容和其他页面内容。
为了解决可访问性问题，开发人员必须使用aria属性（如role =“dialog”）来描述对话框中的内容。正确管理键盘焦点对于使用对话框的可访问性也很重要，例如，对话框中必须至少有一个可调焦的控件。
一些伟大的库被创建，使开发者更容易实现可访问的对话框，比如Edenspiekermann的A11y Dialog。除了这样的库之外，像Bootstrap和Foundation这样的CSS框架也使得它们内置的模式/对话框变得可用。
尽管今天这些库和框架仍然是相关的和有用的，但是具有用于对话的本地HTML元素确保了这样的经常使用的设计模式对于每个人都是很好的语法，标准和可访问性。另外，在浏览器中内置对话逻辑可以节省那些宝贵的代码字节！

使用对话框元素

现在我们明白为什么需要这个了，我们来看看我如何使用对话框元素。

HTML代码

对话框元素的标记就像在<dialog>标签中包装一些内容一样简单。为了使对话框起作用，我们需要一个按钮来打开它，还有一个按钮可以关闭或者撤销它。

<button type="button" class="js-open">Open Dialog</button>
<dialog class="js-dialog">
  <h2>Dialog heading</h2>
  <button type="button" class="js-close">Close Dialog</button>
</dialog>

要使对话框默认打开，可以添加一个打开的属性。

<dialog open>

如果您的对话框包含一个表单，则表单元素的方法属性应设置为对话框。

<form method="dialog">

JavaScript代码

没有JavaScript，对话元素将不会交互。我们可以将上面的HTML例子中的按钮和对话框元素连接到一些点击事件监听器。

const dialog = document.querySelector('.js-dialog')
const openButton = document.querySelector('.js-open')
const closeButton = document.querySelector('.js-close')
openButton.addEventListener('click', () => {
  dialog.showModal()
})
closeButton.addEventListener('click', () => {
  dialog.close()
})

就是这样，我们有一个可以正常运行本地化的对话框！

CSS代码

对话框元素的默认样式不会适合每个人的口味……比较幸运的是，我们可以用CSS来设计样式。

dialog {
  padding: 30px;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
}

还有一个backdrop可以帮助我们选择不同的背景

dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

完整demo演示如下：

支持

早在2014年，Chrome和Opera就开始支持对话元素，最近又推出了Chrome Android和三星浏览器。它也支持Firefox，但必须通过about：config启用。尽管有几个主要的浏览器不支持dialog，但有一个很好的polyfill可用。

原创文章，作者：webstack，如若转载，请注明出处：https://www.webstacks.cn/tutorial/647.html