如何通过从页面上的任何地方（其他）单击来关闭Twitter Bootstrap弹出框？

javascript jquery twitter-bootstrap

2022-08-30 02:38:16

我目前正在将弹出框与Twitter Bootstrap一起使用，启动如下：

$('.popup-marker').popover({
        html: true,
        trigger: 'manual'
    }).click(function(e) {
        $(this).popover('toggle');
        e.preventDefault();
    });

如您所见，它们是手动触发的，单击.popup-marker（带有背景图像的div）可以切换弹出框。这工作得很好，但我也希望能够通过单击页面上的其他任何位置来关闭弹出框（但不是弹出框本身！

我已经尝试了几种不同的方法，包括以下内容，但没有显示任何结果：

$('body').click(function(e) {
    $('.popup-marker').popover('hide');
});

如何通过单击页面上的其他任何位置来关闭弹出框，而不是单击弹出框本身？

答案 1

假设任何时候都只能看到一个弹出框，您可以使用一组标志来标记何时有可见的弹出框，然后才隐藏它们。

如果在文档正文中设置了事件侦听器，则当您单击标有“popup-marker”的元素时，它将触发。因此，您必须调用事件对象。并在单击弹出框本身时应用相同的技巧。stopPropagation()

下面是一个工作JavaScript代码来做到这一点。它使用jQuery >= 1.7

jQuery(function() {
    var isVisible = false;

    var hideAllPopovers = function() {
       $('.popup-marker').each(function() {
            $(this).popover('hide');
        });  
    };

    $('.popup-marker').popover({
        html: true,
        trigger: 'manual'
    }).on('click', function(e) {
        // if any other popovers are visible, hide them
        if(isVisible) {
            hideAllPopovers();
        }

        $(this).popover('show');

        // handle clicking on the popover itself
        $('.popover').off('click').on('click', function(e) {
            e.stopPropagation(); // prevent event for bubbling up => will not get caught with document.onclick
        });

        isVisible = true;
        e.stopPropagation();
    });


    $(document).on('click', function(e) {
        hideAllPopovers();
        isVisible = false;
    });
});

http://jsfiddle.net/AFffL/539/

唯一需要注意的是，您将无法同时打开2个弹出窗口。但我认为这对用户来说会令人困惑，无论如何：-）

答案 2

这甚至更容易：

$('html').click(function(e) {
    $('.popup-marker').popover('hide');
});

$('.popup-marker').popover({
    html: true,
    trigger: 'manual'
}).click(function(e) {
    $(this).popover('toggle');
    e.stopPropagation();
});