2024 Web 新特性 - 使用 Popover API 创建弹窗

简介: Popover API简化了Web弹窗创建,标准化处理在所有主要浏览器中可用。它提供声明式创建弹出式菜单、提示和信息卡片,解决代码冗余和兼容性问题。弹窗自动定位在顶层,支持通过Esc键或点击外部关闭,且与触发元素语义关联。基础用法涉及`popover`和`popovertarget`属性。

Popover API 为开发者提供了一种声明式的方式来创建各种类型的弹窗。目前已在所有三大浏览器引擎中可用,并正式成为 Baseline 2024 的一部分。

popver.png

一直以来,我们在实现弹出式菜单、提示框或信息卡片时,往往依赖于各种JavaScript库或者自定义CSS样式来完成。虽然这些方法有效,但它们通常伴随着代码冗余、兼容性问题。Popover API正是为了简化这一过程而生,它为Web开发者提供了一套标准化的方法来创建和控制弹出窗口,确保了跨浏览器的一致性和易用性。

Popover API 弹窗的一些特点如下:

弹窗将出现在页面的最顶层,无需您调整z-index
点击弹窗区域外部将关闭弹出窗口并返回焦点。
打开弹窗后,下一个制表符停止位置将位于弹窗内部。
按下Esc键或双击切换将关闭弹窗并返回焦点。
将弹窗元素与弹窗触发器进行语义上的连接。
使用 Popover API 创建一个最基础的弹窗非常简单,只需要一个button 按钮用于触发弹窗,和一个弹窗 div 元素。

首先,给弹窗 div 元素添加 popover 属性,并给它设置一个唯一 id
然后,在给按钮的添加popovertarget属性,值设置为弹窗的id

代码如下:

<button popovertarget="my-popover">打开弹窗</button>

<div id="my-popover" popover>
  <p>我是一个包含一些信息的弹窗。 按下 <kbd>Esc</kbd> 键或点击弹窗外部将我关闭<p>
</div>

此时一个最简单的点击按钮显示弹窗功能就实现了。

演示效果如下:

通过 popover 属性制作弹窗,基础版 - 在线演示

popover作品演示的副本.png

其中属性 popover 如果不赋值,则等同于 popover="auto""auto"值表示启用点击弹窗外部则自动关闭弹窗。如果设置popover="manual",则点击弹窗外部不会再自动关闭弹窗,此时你将需要自定义关闭按钮来触发弹窗的关闭。

例如:

<button popovertarget="my-popover" class="trigger-btn">打开弹窗</button>

<div id="my-popover" popover=manual>
  <p>我是一个包含一些信息的弹窗。按下❌按钮即可将我关闭<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true"></span>
  </button>
</div>

演示效果如下:

通过 popover 属性制作弹窗,自定义关闭按钮 - 在线演示

popover自定义关闭按钮-作品演示的副本.png

此时,你会看到点击弹窗外部不会再自动关闭弹窗,点击自定义的关闭按钮才会关闭弹窗。

有关 popover 弹出窗口的 MDN 文档

目录
相关文章
|
22小时前
|
JSON API 开发者
惊!Python Web开发新纪元,RESTful API设计竟能如此性感撩人?
【7月更文挑战第24天】在 Python Web 开发领域, RESTful API 设计成为一种艺术, 关注用户体验与开发者友好性。
15 7
|
1天前
|
JSON API 数据格式
深度剖析!Python Web 开发中 RESTful API 的每一个细节,你不可不知的秘密!
【7月更文挑战第23天】在Python Web开发中,RESTful API利用HTTP协议构建强大、灵活的应用。GET获取资源,如`/products/:id`;POST创建新资源;PUT更新;DELETE删除。正确使用状态码,如200、201、404、500,至关重要。JSON化数据与版本控制(如`/v1/products`)增强API实用性。认证(OAuth, JWT)保障安全性,而清晰的错误消息提升用户体验。掌握这些细节,方能设计出高性能、易用的RESTful API。
13 7
|
22小时前
|
SQL API 网络架构
Pythoner必看!RESTful API设计秘籍,让你的Web应用瞬间高大上!
【7月更文挑战第24天】在 Python Web 开发中, RESTful API 设计至关重要, 它不仅展现技术实力, 更提升应用的可维护性与用户体验。
10 5
|
22小时前
|
JSON API 数据库
从零到英雄?一篇文章带你搞定Python Web开发中的RESTful API实现!
【7月更文挑战第24天】在Python的Web开发领域,掌握RESTful API至关重要。利用Flask框架,可迅速搭建API,进行用户管理的CRUD操作。需先安装Flask (`pip install Flask`),然后定义路由处理GET、POST、PUT、DELETE请求,实现用户数据的检索、创建、更新和删除。
13 5
|
2天前
|
API 数据安全/隐私保护 开发者
Web 开发新风尚!Python RESTful API 设计与实现,让你的接口更懂开发者心!
【7月更文挑战第23天】Python的RESTful API设计在Web开发中流行,提升效率与体验。REST强调HTTP方法(GET, POST, PUT, DELETE)操作资源。使用Flask框架可快速实现API,如管理用户信息。示例代码展示如何创建、读取、更新和删除用户,通过不同HTTP方法和URL路径。实际应用中,增加验证、错误处理和权限控制可增强API的安全性和稳定性。安装Flask后,可运行代码测试API功能。
17 6
|
22小时前
|
JSON API 网络架构
揭秘!Python Web框架下的RESTful API设计,为何成为互联网新宠?
【7月更文挑战第24天】在互联网快速发展背景下,RESTful API以其简洁性和可扩展性成为应用间通信的首选。REST强调资源为核心,利用HTTP方法处理CRUD操作,促进前后端分离,提高开发效率。Python的Flask框架支持轻松构建RESTful API,通过路由、请求和响应机制实现。示例代码展示了如何使用Flask创建、读取和更新用户信息。Python Web框架因其丰富的工具和库,简化RESTful API开发,适应微服务架构需求,在互联网发展中扮演重要角色。
|
1天前
|
安全 算法 编译器
PHP 8的新特性及其对现代Web开发的影响
随着PHP 8的发布,这个广泛使用的服务器端脚本语言带来了一系列令人兴奋的更新和改进。本文将深入探讨PHP 8中引入的关键新特性,以及这些变化如何影响现代Web开发实践。我们将通过实际案例和性能数据来分析这些新特性的实际应用,为开发者提供升级和采纳新版本的见解。
|
2天前
|
安全 算法 编译器
PHP 8新特性及其对现代Web开发的影响
随着PHP 8的发布,这一广泛使用的编程语言带来了一系列激动人心的新特性,旨在提高性能、增加语言表现力并简化代码。本文将深入探讨PHP 8中引入的关键改进,包括JIT编译器、联合类型、匹配表达式、命名参数、错误处理机制等,以及这些新特性如何影响现代Web开发实践。我们将通过实际示例和案例分析,展示开发者如何利用这些新工具来构建更高效、可维护和安全的应用程序。
|
1天前
|
存储 安全 编译器
探索PHP 8的新特性及其对现代Web开发的影响
在PHP 8的发布中,开发者社区迎来了一场革新。这一版本不仅提升了语言的性能,还引入了多项新特性,旨在简化代码编写、增强类型安全和提升开发者体验。本文将深入探讨PHP 8的关键改进点,包括JIT编译器、联合类型、命名参数、匹配表达式等,并分析这些变化如何塑造未来的Web开发趋势。通过实际案例和技术解析,我们将展现PHP 8如何为现代Web应用开发带来前所未有的便利与高效。
|
1天前
|
安全 编译器 PHP
探索PHP 8的新特性及其对现代Web开发的影响
随着PHP 8的发布,这一经典编程语言迎来了多项新特性和性能改进,为现代Web开发提供了更多的灵活性和效率。从联合类型到命名参数,再到JIT编译器,PHP 8的更新旨在提高代码的可读性、安全性和执行速度。本文将深入探讨这些新特性及其对开发者的具体意义,同时评估其对现有项目升级的可能影响。
8 0