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 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
jQuery中选择器的基础使用教程
May 23 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
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图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
Python OS模块常用函数说明
2015/05/23 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
T3官网:头发造型工具
2019/12/26 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
建筑工程专业毕业生自荐信
2013/10/19 职场文书
yy结婚证婚词
2014/01/10 职场文书
医生辞职信范文
2015/03/02 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
离职证明格式样本
2015/06/12 职场文书
2016教师国培研修感言
2015/12/08 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
jquery插件实现图片悬浮
2021/04/16 jQuery
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
Python基础之函数嵌套知识总结
2021/05/23 Python
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA