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 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 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写入数据到CSV文件的方法
2015/03/14 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
bootstrap下拉分页样式 带跳转页码
2018/12/29 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
讲解Python中if语句的嵌套用法
2015/05/14 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
python多线程分块读取文件
2019/08/29 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
python和php哪个更适合写爬虫
2020/06/22 Python
Python如何将模块打包并发布
2020/08/30 Python
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
灵泰克Java笔试题
2016/01/09 面试题
就业推荐表自我鉴定范文
2014/03/21 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python