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 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
Node.js模块加载详解
Aug 16 Javascript
Json解析的方法小结
Jun 22 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
JS如何监听div的resize事件详解
Dec 03 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的闭合标签“?&gt;”
2014/08/28 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
分享20款好玩的jQuery游戏
2011/04/17 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
微信小程序实现人脸检测功能
2018/05/25 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
中海讯通笔试题
2015/09/15 面试题
高三高考决心书
2014/03/11 职场文书
《青山不老》教学反思
2016/02/22 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书