程序员之家
程序员之家

Bootstrap5 弹出框


弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的是它可以显示更多的内容。


如何创建弹出框

通过向元素添加 data-bs-toggle="popover" 来来创建弹出框。

title 属性的内容为弹出框的标题,data-bs-content 属性显示了弹出框的文本内容:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="弹出框标题" data-bs-content="弹出框内容">多次点我</button>

注意: 弹出框要写在 JavaScript 的初始化代码里。

以下实例可以在文档的任何地方使用弹出框:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

指定弹出框的位置

默认情况下弹出框显示在元素右侧。

可以使用 data-bs-placement 属性来设定弹出框显示的方向:

  • top
  • bottom
  • left
  • right
<a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="我是内容部分">点我</a>
<a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="我是内容部分">点我</a>
<a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="我是内容部分">点我</a>
<a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="我是内容部分">点我</a>

关闭弹出框

默认情况下,弹出框在再次点击指定元素后就会关闭,你可以使用 data-bs-trigger="focus" 属性来设置在鼠标点击元素外部区域来关闭弹出框:

<a href="#" title="取消弹出框" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="点击文档的其他地方关闭我">点我</a>

提示:如果你想实现在鼠标移动到元素上显示,移除后消失的效果,可以使用 data-bs-trigger 属性,并设置值为 "hover":

<a href="#" title="标题" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="一些内容">鼠标移动到我这</a>

手机扫码阅读本文


本文来自互联网,本网站转载的目的在于传递更多信息以供访问者学习参考,所属内容只代表原作者的个人观点,不代表本网站的立场和价值判断,版权归原作者所有。如有侵犯您的版权,请联系我们,我们收到后会尽快核实并第一时间改正。


手机扫码阅读本文

Bootstrap入门经典【图】
Bootstrap入门经典

热门Web开发 Javascript框架 HTML CSS网站建设 网页设计制作 零基础读者杰出Bootstrap教程 全面涵盖常见组件的使用方法 书中代码真实有效可运行

HTML5权威指南【图】
HTML5权威指南

全面详实的Web网页设计参考书

Spring Boot+MVC+Vue3 项目全流程开发指南:从需求分析到上线部署【图】
Spring Boot+MVC+Vue3 项目全流程开发指南:从需求分析到上线部署

一站式掌握SpringBoot、MVC、Vue3全流程开发。本书通过全面覆盖从需求分析到上线部署的各个环节,提供了一套完整、实用的软件项目开发方法。它不仅适合有一定编程基础的开发者深入学习,也适合技术管理者和架构师提升项目管理和架构设计的能力。

bootstrap5 Bootstrap5-popover