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

Question

我正在使用引导程序 v2.2.2。我尝试了其他一些方法（即：在弹出框之外关闭弹出框但在里面保持打开状态以及如何通过单击外部来关闭 Twitter Bootstrap 弹出框？还尝试了 BootstrapX clickover 插件：https ://stackoverflow.com/a/11029479/ 104381​​7 ) 但我无法通过这些方法让它工作。

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

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

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

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 之后加载的，那么没有理由不应该这样做。使用浏览器控制台检查错误