Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码


Posted in Javascript onJuly 11, 2017

1.Bootstrap弹出框示例

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框</button>

Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码

2.改进

有时提示框内容较多,仅仅使用data-content,title,在html文档里写出来比较乱,我们可以借助提供的popover()方法,实现对弹出框内容、样式的修改。

$("#btn-danger").popover({
 html: true,  //实现对html可写
 title: keywords_title(), //标题函数
 content: function() {
  return keywords_content(); //内容函数
 }
});
//标题函数 
function keywords_title() {
 return '结果说明:';
}
//内容函数,同时对样式进行修改
function keywords_content() {
 var data = $('<div style="width:700px;color: #787671" ><p><span>提及结果列关键词不区分英文大小写</span></p></div>');
}
//以下是弹出框样式,可以根据需要自定义修改
.popover {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1060;
 display: none;
 max-width: 276px;
 padding: 1px;
 font-size: 14px;
 font-weight: 400;
 line-height: 1.42857143;
 text-align: left;
 white-space: normal;
 background-color: #fff;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
 border: 1px solid #ccc;
 border: 1px solid rgba(0,0,0,.2);
 border-radius: 6px;
 -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
 box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

以上所述是小编给大家介绍的Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
重写javascript中window.confirm的行为
Oct 21 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
JS匿名函数实例分析
Nov 26 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
angularjs自定义过滤器demo示例
Aug 24 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 #Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 #Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 #Javascript
JS自定义滚动条效果简单实现代码
Oct 27 #Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 #jQuery
微信小程序分页加载的实例代码
Jul 11 #Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 #Javascript
You might like
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
PHP中16个高危函数整理
2019/09/19 PHP
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
Python字符转换
2008/09/06 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
大学生毕业自我评价范文分享
2013/11/11 职场文书
工艺员岗位职责
2014/02/11 职场文书
施工安全标语
2014/06/07 职场文书
汽车维修求职信
2014/06/15 职场文书
党员倡议书
2015/01/19 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android