有没有办法在弹出框外单击时关闭 Twitter Bootstrap 弹出框？ [复制]答案

【问题标题】：Is there a way to close a Twitter Bootstrap popover on click outside the popover? [duplicate]有没有办法在弹出框外单击时关闭 Twitter Bootstrap 弹出框？ [复制]
【发布时间】：2012-11-09 06:11:43
【问题描述】：

可能重复：
How can I close a Twitter Bootstrap popover with a click from anywhere (else) on the page?

我希望 Twitter Bootstrap 弹出框仅在用户在弹出框之外单击时关闭。我不想点击 inside 关闭弹出框的弹出框。我已经搜索过，对此的答案是即使单击弹出框的内部也会关闭弹出框。如果可能的话，也请不要推荐 gem，因为我正在寻找代码解决方案。谢谢！

html:

<a id="test-button" href="#" class="btn">Popover</a>

javascript/jquery:

$('#test-button').popover({content:"stuff", trigger:'click'});

【问题讨论】：

这不是重复的。如果您阅读了我的描述，那么当在弹出框内单击该问题时，该问题的答案甚至会关闭弹出框。我不希望这种情况发生。我希望它仅在弹出框在弹出框之外时关闭。

标签： javascript jquery twitter-bootstrap

【解决方案1】：

我发现这个问题似乎是重复的，但最重要的答案对我不起作用。最后，我修改了代码，在 .popover 切换时添加了一个新的单击绑定，从而产生了预期的效果。

工作 jsFiddle：http://jsfiddle.net/asanger/AFffL/266/

var isVisible = false;
var clickedAway = false;

$('.popup-marker').popover({
        html: true,
        trigger: 'manual'
    }).click(function(e) {
        $(this).popover('show');
        clickedAway = false
        isVisible = true
        e.preventDefault()
            $('.popover').bind('click',function() {
                clickedAway = false
                //alert('popover has been clicked!');
            });
    });

$(document).click(function(e) {
  if(isVisible && clickedAway)
  {
    $('.popup-marker').popover('hide')
    isVisible = clickedAway = false
  }
  else
  {
    clickedAway = true
  }
});

【讨论】：

谢谢。这个变体是我发现的唯一一个当点击在窗口外而不是在窗口内时隐藏弹出窗口的变体。
这很好用，但是如果用户再次单击.popup-marker，弹出框会隐藏并再次显示。相信预期的体验应该是：点击.popup-marker，显示弹窗。点击外部.popover — 包括.popup-marker，然后隐藏弹出框（不要重新显示.popover）。有什么技巧可以做到这一点？
快速修复：将 $(this).popover('show'); 更改为 $(this).popover('toggle'); 即可完美运行。
我认为这是完美和最佳的解决方案。简单而精确（y）

【解决方案2】：

您可以附加到顶级元素的点击事件。即

$("#main").click(function () {
    $('#mything').popover('hide')
});

【讨论】：

【解决方案3】：

使用手动触发：

$('.popup-marker').popover({
    html: true,
    trigger: 'manual'
});

【讨论】：