前端开发

 首页 > 前端开发 > 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网网站的支持!

分享到:
JavaScript实现图片切换效果
本文实例为大家分享了JavaScript实现图片切换效果,自定义属性的应用  供大家参考,具体内容如下             图片切换实例            body{         background-color: #A9A9A9;         margin:0px;       }       ul{         padding: 0; ...
React-Native实现ListView组件之上拉刷新
在web应用中,上拉刷新加载更多,下拉刷新列表的操作非常常见,那么在React-Native中是如何实现呢,我们具体来看一下 ReactNative提供了RefreshControl下拉刷新组件,但是没有提供上拉刷新组件,上拉刷新在App中是很常用的。 今天我们来实现一个iOS和Android通用的上拉刷新功能。 下面简要介绍下我实现的思路。 思路: 1、...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……