Bootstrap的Popover插件点击Popover外区域自动关闭Popover,新开时,自动关闭之前打开的

具体代码如下:

默认只有点击触发的那个按钮才能关闭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');
        }
    });

 

1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    给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]

    aijquery5年前 (2019-04-14)回复