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 文档

目录
相关文章
|
5月前
|
人工智能 搜索推荐 IDE
突破网页数据集获取难题:Web Unlocker API 助力 AI 训练与微调数据集全方位解决方案
本文介绍了Web Unlocker API、Web-Scraper和SERP API三大工具,助力解决AI训练与微调数据集获取难题。Web Unlocker API通过智能代理和CAPTCHA绕过技术,高效解锁高防护网站数据;Web-Scraper支持动态内容加载,精准抓取复杂网页信息;SERP API专注搜索引擎结果页数据抓取,适用于SEO分析与市场研究。这些工具大幅降低数据获取成本,提供合规保障,特别适合中小企业使用。粉丝专属体验入口提供2刀额度,助您轻松上手!
293 2
|
5月前
|
人工智能 运维 安全
网络安全公司推荐:F5荣膺IDC全球Web应用与API防护领导者
网络安全公司推荐:F5荣膺IDC全球Web应用与API防护领导者
125 4
|
8月前
|
人工智能 前端开发 API
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
Gemini Coder 是一款基于 Google Gemini API 的 AI 应用生成工具,支持通过文本描述快速生成代码,并提供实时代码编辑和预览功能,简化开发流程。
466 38
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
|
6月前
|
XML JSON API
Understanding RESTful API and Web Services: Key Differences and Use Cases
在现代软件开发中,RESTful API和Web服务均用于实现系统间通信,但各有特点。RESTful API遵循REST原则,主要使用HTTP/HTTPS协议,数据格式多为JSON或XML,适用于无状态通信;而Web服务包括SOAP和REST,常用于基于网络的API,采用标准化方法如WSDL或OpenAPI。理解两者区别有助于选择适合应用需求的解决方案,构建高效、可扩展的应用程序。
|
6月前
|
机器学习/深度学习 开发框架 API
Python 高级编程与实战:深入理解 Web 开发与 API 设计
在前几篇文章中,我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用,并通过实战项目帮助你掌握这些技术。
|
9月前
|
Kubernetes 安全 Devops
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
255 10
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
|
9月前
|
存储 Java 数据挖掘
Java 8 新特性之 Stream API:函数式编程风格的数据处理范式
Java 8 引入的 Stream API 提供了一种新的数据处理方式,支持函数式编程风格,能够高效、简洁地处理集合数据,实现过滤、映射、聚合等操作。
286 6
|
11月前
|
缓存 JavaScript 前端开发
深入理解 Vue 3 的 Composition API 与新特性
本文详细探讨了 Vue 3 中的 Composition API,包括 setup 函数的使用、响应式数据管理(ref、reactive、toRefs 和 toRef)、侦听器(watch 和 watchEffect)以及计算属性(computed)。我们还介绍了自定义 Hooks 的创建与使用,分析了 Vue 2 与 Vue 3 在响应式系统上的重要区别,并概述了组件生命周期钩子、Fragments、Teleport 和 Suspense 等新特性。通过这些内容,读者将能更深入地理解 Vue 3 的设计理念及其在构建现代前端应用中的优势。
376 1
深入理解 Vue 3 的 Composition API 与新特性
|
10月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
216 1
|
10月前
|
JavaScript 前端开发 API
Vue 3新特性详解:Composition API的威力
【10月更文挑战第25天】Vue 3 引入的 Composition API 是一组用于组织和复用组件逻辑的新 API。相比 Options API,它提供了更灵活的结构,便于逻辑复用和代码组织,特别适合复杂组件。本文将探讨 Composition API 的优势,并通过示例代码展示其基本用法,帮助开发者更好地理解和应用这一强大工具。
227 2