如何点击外面关闭Twitter Bootstrap popover？

Question

我们能否以与模态相同的方式使弹出窗口被解雇,即.当用户点击它们之外的某个地方时,让它们关闭？

不幸的是我不能只使用真正的模态而不是弹出模式,因为模态意味着位置:固定并且不再是弹出模式.:(

Answer 1

更新:一个稍微强大的解决方案:http://jsfiddle.net/mattdlockyer/C5GBU/72/

对于仅包含文本的按钮:

$('body').on('click', function (e) {
    //did not click a popover toggle or popover
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
});

对于包含图标使用的按钮(此代码在Bootstrap 3.3.6中有一个错误,请参阅此答案中的下面的修复)

$('body').on('click', function (e) {
        //did not click a popover toggle, or icon in popover toggle, or popover
        if ($(e.target).data('toggle') !== 'popover'
            && $(e.target).parents('[data-toggle="popover"]').length === 0
            && $(e.target).parents('.popover.in').length === 0) { 
            $('[data-toggle="popover"]').popover('hide');
        }
    });

用于JS生成的弹出用途'[data-original-title]'代替'[data-toggle="popover"]'

警告:上面的解决方案允许一次打开多个弹出窗口.

一次一个popover请:

更新: Bootstrap 3.0.x,查看代码或小提琴http://jsfiddle.net/mattdlockyer/C5GBU/2/

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

这样可以处理已经打开但没有点击的弹出窗口的关闭或者没有点击它们的链接.

更新: Bootstrap 3.3.6,请参阅小提琴

修复问题在关闭后,需要2次点击才能重新打开

$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {                
            (($(this).popover('hide').data('bs.popover')||{}).inState||{}).click = false  // fix for BS 3.3.6
        }

    });
});

Answer 2

$('html').on('mouseup', function(e) {
    if(!$(e.target).closest('.popover').length) {
        $('.popover').each(function(){
            $(this.previousSibling).popover('hide');
        });
    }
});

如果您点击弹出窗口以外的任何地方,这将关闭所有弹出窗口

Bootstrap 4.1的更新

$("html").on("mouseup", function (e) {
    var l = $(e.target);
    if (l[0].className.indexOf("popover") == -1) {
        $(".popover").each(function () {
            $(this).popover("hide");
        });
    }
});

Answer 3

最简单,最安全的故障版本适用于任何引导程序版本.

演示:http: //jsfiddle.net/guya/24mmM/

演示2:点击popover内容http://jsfiddle.net/guya/fjZja/时不要解雇

演示3:多个弹出窗口:http: //jsfiddle.net/guya/6YCjW/

简单地调用此行将解除所有弹出窗口:

$('[data-original-title]').popover('hide');

使用此代码单击外部时,关闭所有弹出窗口:

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined') {
    $('[data-original-title]').popover('hide');
  }
});

上面的代码段会在主体上附加一个点击事件.当用户单击一个弹出框时,它将表现正常.当用户点击不是popover的东西时,它将关闭所有弹出窗口.

它也适用于使用Javascript启动的弹出窗口,而不是其他一些不起作用的示例.(见演示)

如果您不想在单击popover内容时忽略,请使用此代码(请参阅第2个演示的链接):

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
  }
});

Answer 4

使用bootstrap 2.3.2,您可以将触发器设置为"焦点",它只是起作用:

$('#el').popover({trigger:'focus'});

Answer 5

这基本上不是很复杂,但有一些检查可以避免故障.

演示(jsfiddle)

var $poped = $('someselector');

// Trigger for the popover
$poped.each(function() {
    var $this = $(this);
    $this.on('hover',function() {
            var popover = $this.data('popover');
            var shown = popover && popover.tip().is(':visible');
            if(shown) return;        // Avoids flashing
            $this.popover('show');
    });
});

// Trigger for the hiding
 $('html').on('click.popover.data-api',function() {
    $poped.popover('hide');
});

Answer 6

所谓的高投票解决方案都没有正确地为我工作.每次打开和关闭(通过单击其他元素)弹出窗口时,每个都会导致错误,它不再打开,直到您在触发链接而不是一次点击两次.

所以我稍微修改了一下:

$(document).on('click', function (e) {
    var
        $popover,
        $target = $(e.target);

    //do nothing if there was a click on popover content
    if ($target.hasClass('popover') || $target.closest('.popover').length) {
        return;
    }

    $('[data-toggle="popover"]').each(function () {
        $popover = $(this);

        if (!$popover.is(e.target) &&
            $popover.has(e.target).length === 0 &&
            $('.popover').has(e.target).length === 0)
        {
            $popover.popover('hide');
        } else {
            //fixes issue described above
            $popover.popover('toggle');
        }
    });
})

Answer 7

我做了一个jsfiddle来告诉你如何做到这一点:

http://jsfiddle.net/3yHTH/

想法是在单击按钮时显示弹出窗口,并在单击按钮外部时隐藏弹出窗口.

HTML

<a id="button" href="#" class="btn btn-danger">Click for popover</a>

JS

$('#button').popover({
    trigger: 'manual',
    position: 'bottom',
    title: 'Example',
    content: 'Popover example for SO'
}).click(function(evt) {
    evt.stopPropagation();
    $(this).popover('show');
});

$('html').click(function() {
    $('#button').popover('hide');
});

Answer 8

只需在元素中添加此属性

data-trigger="focus"

Answer 9

Bootstrap 5 更新：

$(document).on('click', function (e) {
    var
        $popover,
        $target = $(e.target);

    //do nothing if there was a click on popover content
    if ($target.hasClass('popover') || $target.closest('.popover').length) {
        return;
    }

    $('[data-bs-toggle="popover"]').each(function () {
        $popover = $(this);

        if (!$popover.is(e.target) &&
            $popover.has(e.target).length === 0 &&
            $('.popover').has(e.target).length === 0)
        {
            $popover.popover('hide');
        } 
    });
})

Answer 10

根据http://getbootstrap.com/javascript/#popovers，

<button type="button" class="popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="Popover Content">Dismissible popover</button>

使用焦点触发器在用户下一次单击时关闭弹出窗口。

$('.popover-dismiss').popover({
    trigger: 'focus'
})

Answer 11

只需将此属性添加到 html 元素即可在下次单击时关闭弹出窗口。

data-trigger="focus"

来自https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click 的参考