Question

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

当用户在弹出窗口外单击时，我希望Twitter Bootstrap popover仅关闭。我不希望点击里面关闭popover的popover。我已经搜索过，这个答案就是为了点击popover内部关闭popover。如果可能的话，也请不要宝石建议，因为我正在寻找代码解决方案。谢谢！

HTML：

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

的javascript / jquery的：

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

Answer 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
  }
});

Answer 2

使用手动触发器：

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

Answer 3

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

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

有没有办法在弹出窗口外点击关闭Twitter Bootstrap popover？

3 个答案:

使用手动触发器：