Question

我正在使用bootstrap v2.2.2。我尝试过其他一些方法（即：close popover outside popover but inside stay open和How to dismiss a Twitter Bootstrap popover by clicking outside?也试过Boot strapX clickover插件：https://stackoverflow.com/a/11029479/1043817）但是我无法通过这些方法使用它。

我用我在页面上使用代码的方式创建了一个JSFiddle：http://jsfiddle.net/FYNLL/（虽然我使用的是v2.2.2，但JSFiddle使用的是v2.0.2中的JS。我认为有这些版本有些不同。当我在本地使用v2.2.2时，直到我点击链接才会显示popover。在JSFiddle中它会在悬停时显示。要清楚我希望在链接被显示后显示点击，而不是悬停）

我想要完成的是在点击弹出窗口外的区域时隐藏弹出窗口。如果单击另一个弹出链接，我希望关闭第一个弹出窗口并单击要打开的弹出窗口。

这也不是绝对必要的，但是当它在.js文件中时我无法让popover工作（我尝试使用.each()）。我真的想从我的HTML文件中删除<script> $(function () { $("a[rel=popover]").popover(); });</script>。同样，这不是一个优先事项。

Answer 1

// Universal Popupover Outside Click Close Method :)
jQuery(document).mouseup(function(e){ 
    var popocontainer = jQuery(".popover");
    if (popocontainer.has(e.target).length === 0){
        jQuery('.popover').toggleClass('in').remove();
    }
});

Answer 2

收听冒泡到文档的点击事件，并确定它的目标是否在弹出框内。如果没有，那么隐藏它：

var popover = $('#someEl').popover(options);

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

   if(src.hasClass('popover') || src.closest('popover').length) {
     $('#someEl').popover('hide');
   }
});

Answer 3

API中提供了所有解决方案。 http://twitter.github.com/bootstrap/javascript.html#popovers

查看options/trigger和方法：.popover('hide')

至于不从脚本文件运行，如果你的代码包装在ready处理程序中并且你的脚本文件在bootstrap.js之后加载，则没有理由不应该这样做。使用浏览器控制台检查错误

popover：在弹出窗口外单击时关闭弹出窗口

3 个答案: