前端开发

 首页 > 前端开发 > javascript > Bootstrap弹出框之自定义悬停框标题、内容

Bootstrap弹出框之自定义悬停框标题、内容

分享到:
【字体:
导读:
         [导读] 这篇文章主要介绍了Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码,需要的朋友可以参考下...

1.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 = $('

提及结果列关键词不区分英文大小写

'); } //以下是弹出框样式,可以根据需要自定义修改 .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弹出框之自定义悬停框标题、内容和样式示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对自学php网网站的支持!

分享到:
form.submit()不能提交表单的原因分析
直接上代码把: 会员注册 请认真填写以下内容 用户名: 密码: 确认密码: m01.gif 验证码: 换一张 表单数据提交到本页面,下面是js处理 /*注册表单提交*/ function formDeal() { var btnSubmit = document.getElementById('submit');...
nodejs后台集成ueditor富文本编辑器的实...
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.. 1 下载ueditor nodejs版本 2 复制public目录下面的文件 到项目静态资源public文件夹下 3 在项目根目录创建ueditor文件夹 要复制进来的内容为 4 在根目录的 ue...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……