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

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

}

//以下是弹出框样式，可以根据需要自定义修改

.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弹出框之自定义悬停框标题、内容和样式示例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。