主要观点:模态框(Modals)在网站中已有二十年历史,通过堆叠内容和使用fetch
可提升桌面和移动设备的用户体验,多数开发者不知 HTML 和 JavaScript 规范已通过popover
属性实现了原生模态系统,此文介绍了原生 HTML 模态框的创建及相关 CSS 样式,还提及了近期功能(如成为开发者爸爸相关内容、HTML5 的相机和视频控制等)和精彩演示(如 MooTools 的 Do/Undo 功能、Ana Tudor 最喜欢的 CodePen 演示等)。
关键信息:
- 原生 HTML 模态框创建:使用
popovertarget
属性作为触发器,popover
属性并搭配id
来标识内容元素。 - CSS 样式:
[popover]
用于设置模态框内容样式,[popover]:-internal-popover-in-top-layer::backdrop
用于设置模态框的“背景”。 - 近期功能包括成为开发者爸爸相关内容及 HTML5 相机和视频控制等。
- 精彩演示有 MooTools 的 Do/Undo 功能和 Ana Tudor 最喜欢的 CodePen 演示等。
重要细节:点击按钮可打开模态框,传统模态框背景层颜色需用 CSS 实现,文中提供了相关代码链接及多个宣传图片。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。