Bootstrap3 弹出提示插件的使用方法
弹出提示
弹出提示(popover.js)是工具提示的子类,它比工具提示多了一个 content 参数,是工具提示插件的拓展。
弹出框依赖于工具提示插件tooltip.js,如果你定制了 Bootstrap,就一定要将依赖的插件编译进去。
使用方法
你可以给任何元素添加弹出提示,并通过 title 属性定义提示的标题,通过 data-content 属性定义提示的内容。如:
<a href="#" title="popover" data-content="Here is popover content">Popover Example</a>
由于性能的原因,也不能通过 data 属性直接激活弹出提示插件,需要通过Javascript代码手动初始化它。只有初始化之后,鼠标单击链接时,才会显示相关的提示信息。否则,是不会显示任何提示信息的。
手动初始化弹出提示插件的方法很多。最简单的方法,是通过data-toggle属性一次性初始化页面上的所有弹出提示对象:
$(function () {
$('[data-toggle="popover"]').popover();
})
或者,你也可以单独初始化某个元素上的弹出提示对象。比如,以下代码就只激活 id='#example' 的链接元素上定义的弹出提示:
<a id="example" href="#" data-toggle="popover" title="Hello" data-content="Hi, Long time no see, how are you?">Say Hello</a>
$(function () {
$('#example').popover();
})
与工具提示不同的是,默认情况下,在鼠标单击链接时,才会显示工具提示。并且,弹出提示的默认位置在目标对象的右侧。运行效果如图 4‑8所示:
图4-8 弹出提示
通过 data-placement 属性,可以设置提示信息的显示位置,可选值有 top | bottom | left | right。效果如图 4‑9所示:
图4-9 弹出提示的显示位置
默认情况下,弹出提示一旦显示,就不会再隐藏。如果希望点击空白区域让弹出框消失,只需设置 data-trigger="focus"
属性即可。为了更好的跨浏览器和跨平台效果,你必须使用<a>
标签,而不能使用<button>
标签,并且,还必须包含role="button"
和tabindex
属性。如:
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">可消失的弹出框</a>
设置 data-trigger="focus"
属性以后,在链接上点击,会弹出提示信息,点击链接和提示框之外的空白区域,提示框便自动消失。
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
Bootstrap3 弹出提示插件的使用方法相关推荐
- Bootstrap3 弹出提示插件的方法
弹出提示插件的方法 1..popover (options) 使用一个可选的对象参数 options调用某个页面元素的弹出提示.如: $('#element').popover ({ placem ...
- Bootstrap3 弹出提示插件的选项
弹出提示插件的选项 Bootstrap为工具提示插件提供了 11 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置.这些选项详细见表 4‑7: 表 4‑7 popover插件 ...
- Bootstrap 弹出提示插件Popover 的方法
方法 1..popover (options) 使用一个可选的对象参数 options调用某个页面元素的弹出提示.如: $('#element').popover ({ placement: ri ...
- Bootstrap 弹出提示插件popover 的使用方法
弹出提示 弹出提示是工具提示的子类,它比工具提示多了一个 content 参数,是工具提示插件的拓展. 弹出提示插件需要 bootstrap-popover.js 文件支持,在使用该插件之前,应该导入 ...
- Bootstrap 弹出提示插件Popover 的选项
选项 Bootstrap为工具提示插件提供了 8 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 5‑5: 表 5‑5 popover插件的选项 名称 类型 默认值 ...
- Bootstrap警告框、弹出提示层、模态框的js插件效果总结
Bootstrap警告框js插件 经常会在bootstrap项目中遇到警告框.弹出提示层.弹出模态框组件等等场景应用. 使用前准备: 插件使用之前,请先导入如下文件: jquery.min.js bo ...
- C#web弹出提示框的几种方法
在C#制作网站中我用到的弹出提示框的方法如下: 构造一个函数msgbox,然后调用. #region 实现MsgBox功能 /// /// 显示"确定"点击以后就转 ...
- php 右下脚弹窗,JavaScript实现右下角弹出提示框的方法
在我们日常开发工作中,我们会经常遇到需要在页面的右下角弹出提示框或者广告的小功能,这样是为了更好的让用户体验,那么如何实现网页右下角弹出提示框呢?今天我们就带大家介绍下JavaScript实现右下角弹 ...
- 用计算机弹吃鸡,Win10系统玩吃鸡游戏弹出提示“out of memory”的解决方法
绝地求生是一款很火爆的竞技类游戏,它的俗称就叫做"吃鸡".用win10电脑来玩绝地求生的用户越来越多,因为吃鸡游戏对电脑的配置要求特别的高,甚至于有些用户为了更好的体验这个游戏,将 ...
最新文章
- 资源 | 想用Python学机器学习?Google大神替你写好了所有的编程示范代码
- 遭遇“生活天花板”,如何用 OKR 弯道超车?
- python oop求三角形面积公式_python学习日记(OOP——类的内置方法)
- 1.11 抽象(abstract)类
- 强化学习6——policy gradient的变种State of the Art
- e.printStackTrace() 会导致锁死?
- 字节跳动28岁程序员退休:我只想做一个自由的“废物”
- 计算机word宿舍管理软件,【UML课程设计】宿舍管理系统设计(WORD完整版).doc
- Vivado2018使用教程
- Qt 语言切换 QTranslator cmake qmake
- python123第九周测验答案2020_2020知到答案 大数据分析的python基础 最新智慧树满分章节测试答案...
- java实现萤石云截图保存上传到ftp功能
- Pentaho Report Designer
- Laravel 验证器
- 浅谈软件测试测试策略几点总结内容
- Connection Backoff Interop Test Descriptions
- 2023AB斗篷玩法全攻略
- STM32F105 UC/OS-II (B OSStartHang)问题
- windows下设置GPU加速tensorflow运算(GT940M)
- Python三方库:RabbitMQ基本使用
热门文章
- 精通Python网络爬虫:核心技术、框架与项目实战.3.2 爬行策略
- 【百度地图API】多家地图API内存消耗对比测验(带源码)
- [Android1.6]横竖屏切换时自动弹出键盘的问题
- 教你进入有密码 Windows XP 系统的方法
- SpringCloud系列-Feign的基本应用
- 前端面试题-CSS选择器性能优化
- 又被野外利用了!新曝光Office产品多个远程命令执行漏洞分析
- SQL Server删除整个数据库中表数据的方法(不影响表结构)
- 如何成为一位黑客 ( How To Become A Hacker )
- poj 1228 Grandpa's Estate 给定了一个凸包的部分顶点和边上的点,判断是否能唯一确定一个凸包...