1

可能重复：
如何从页面上的任何位置（其他）单击关闭 Twitter Bootstrap 弹出窗口？

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

html:

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

javascript/jquery：

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

3 回答 3

6

我发现这个问题似乎是重复的，但是最重要的答案对我不起作用。我最终修改了代码，每次切换时添加一个新的单击绑定到 .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
  }
});
​
于 2012-11-21T03:40:06.467 回答
1

使用手动触发器：

$('.popup-marker').popover({
    html: true,
    trigger: 'manual'
});
于 2012-11-21T03:14:16.140 回答
0

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

$("#main").click(function () {
    $('#mything').popover('hide')
});
于 2012-11-21T03:24:21.103 回答