具体代码如下:
默认只有点击触发的那个按钮才能关闭pop,而现在我想点击Popover外区域自动关闭Popover。
这个时候可以给Body加一个监听:
$(function(){ $('[data-toggle="popover"]').popover() //弹窗 .on('show.bs.popover', function () { //展示时,关闭非当前所有弹窗 $(this).parent().siblings().find('[data-toggle="popover"]').popover('hide'); }); }); //给Body加一个Click监听事件 $('body').on('click', function(event) { var target = $(event.target); if (!target.hasClass('popover') //弹窗内部点击不关闭 && target.parent('.popover-content').length === 0 && target.parent('.popover-title').length === 0 && target.parent('.popover').length === 0 && target.data("toggle") !== "popover") { //弹窗触发列不关闭,否则显示后隐藏 $('[data-toggle="popover"]').popover('hide'); } });
给body添加click事件,虽然能实现我们的目的,但不是科学的方法,看这里:
实现点击popover区域外隐藏,这里有个全新的方法,和网上的都不一样,并且有在线实例演示:
[url=http://www.aijquery.cn/Html/bootstrap/224.html][b]bootstrap里popover实现点击区域外关闭隐藏的方法[原创][/b][/url]
[code=javascript]
$("[t='popover']").on("click mouseenter",function(e){
e.stopPropagation();
var $this=$(this);
$this.popover("show");
$(document).one("click",function(){
$this.popover("hide");
});
$(".popover").on("click",function(e){
e.stopPropagation();
});
});
摘自 爱jQuery:http://www.aijquery.cn/Html/bootstrap/224.html
[/code]