初始化弹框:
$('.popover-dismiss').popover({
trigger:'click', // 弹出框的触发方式 :click | hover | focus | manual, 多个 “|”隔开
container: '.BT', // 弹出框的容器,指定弹框的容器是为了样式不冲突,不指定也可
placement: 'bottom', // 弹出框的方向 auto | top | bottom | left | right
content: "<div></div>", // 弹出框的自定义HTML
html: true // 允许将HTML插入到弹出框中
})
初始化完成之后,在需要弹框操作的Dom上绑定弹框事件:
.on("show.bs.popover",function(){
// 当调用 show 实例方法时执行的操作。
......
});
.on("shown.bs.popover",function(){
// 当弹出框显示时执行的操作(待 CSS 转换完成)。
......
});
.on("hide.bs.popover",function(){
// 当调用 hide 实例方法时执行的操作。
......
});
.on("hidden.bs.popover",function(){
// 当弹出框隐藏后执行的操作(将等待CSS转换完成)
......
});
.on("inserted.bs.popover",function(){
// 当将提示范本加到 DOM 时(即在show.bs.popover 事件之后)执行的操作
......
});
实例:
$('.popover-dismiss').popover({
trigger:'focus',
container: 'body',
placement: 'left',
content: function HTML(){
// 自定义弹出框的内容
var typeText = $(".playBtn-wrap").find(".active").text();
var html = '<div id="similarLine"><p>'+typeText+' Variable payoff curve</p><div id="curve" width="410" height="300"></div></div>';
return html;
},
html: true
}).on("shown.bs.popover",function(){
// 当弹出框显示时要执行的操作
var typeIndex = $(".playBtn-wrap").find(".active").index(),
Line = $(this).parents("table").prev(".comp").find("span.active").data("line").match(/\[(.+?)\]/g),
L = $(this).parents("tr").data("line").match(/\[(.+?)\]/g);
similarEchartsLine(typeIndex,Line,L)
})