用示例探索 HTML <dialog> 元素

dialog广泛称为模态对话框,是网页上的弹出框。当一个对话框用覆盖物遮住页面内容的其余部分时,它也被称为模态对话框。模态对话框的目的是当它显示时,用户不应该能够与页面内容的其余部分进行交互。

这是一个示例模式对话框的示例。对话框的较暗背景称为backdrop cover.

用示例探索 HTML <dialog> 元素_第1张图片

图 1:带有背景封面的示例模式对话框

在本文中,我们将探索

HTML 中的元素并查看它的用法。我们还将了解一些缺点,最后验证它是否可以在您的应用程序中使用。

HTML 原生元素

HTML

元素代表一个对话框,它有一个特殊的属性,

  • open:表示对话框处于活动状态并且可以与之交互。如果未设置 open 属性,则不应向用户显示对话框。

  User can not see me.



  I'm open and visible!

在写这篇文章的时候,它已经得到了浏览器的支持,

  • Chrome: 从版本 37+
  • Edge: 从版本 79+
  • Firefox:在 Firefox 中通过启用dom.dialog_element.enabledabout: config 设置中的标志来支持。即使有标志,背景 CSS 样式也不起作用。
  • Safari: 没有支持。

您可以从这里了解其他平台。

此功能值得比现在更广泛的支持。但好消息是,这个特性是 Polyfillable 的。你可以从这里安装polyfill。

API _

有一些 API 可用于显示和隐藏对话框。

dialog.show(); // to show the dialog
dialog.close(); // to close the dialog

对话框出现了基本的用户代理提供的样式,如自动边距、粗边框样式等,可以使用 CSS 轻松自定义。

用示例探索 HTML <dialog> 元素_第2张图片

图 2:在 Chrome 浏览器上显示基本 UA 样式

这是一个 CodePen 显示基本对话框元素的显示隐藏。

使用dialog.showModal()代替dialog.show()

关于构建自定义对话框的期望之一是如何获得背景封面,这样用户就无法与应用程序的其余部分进行交互。当您从 JavaScript 中使用该方法时,该方法dialog.showModal()免费提供给您。

默认情况下,背景封面为低不透明度黑色。::backdrop您可以使用伪元素控制它的外观。检查此 CodePen 以了解其工作原理,

元素关闭对话框。

如果元素具有属性method="dialog",则元素可以关闭对话框。在这种情况下,我们不需要显式的dialog.close()JavaScript API 调用。


  

I'm a dialog. Close me using the button below.

Escape(ESC) 键关闭

默认情况下,使用转义键关闭对话框的功能与

元素一起提供。这是一个额外的好处,因为您不必实施它。

网页无障碍

模态实际上是最难实现 Web 可访问性的。

元素规范提到解决可访问性问题。

缺点

在对话框外部单击以将其关闭的功能尚不可用。也许将来会添加。到目前为止,您必须实施它。

那么,它准备好使用了吗?

除了shortcoming上面提到的,该dialog组件看起来完全可以与 polyfill 一起使用。由于它在 HTML 中原生可用,因此您不需要任何额外的库支持来实现模态对话框。

你可能感兴趣的:(safari,javascript,前端)