弹出框:在弹出框外单击时关闭弹出框 [英] popover: close pop over when clicked outside of pop over

问题描述

我正在使用引导程序v2.2.2.我尝试了其他一些方法(即:在弹出框之外关闭弹出框，但在内部保持打开状态和https://stackoverflow.com/a/11029479/104381​​7 )但是我无法通过这些方法使它正常工作.

I'm using bootstrap v2.2.2. I've tried a few other methods (namely: close popover outside popover but inside stay open and How to dismiss a Twitter Bootstrap popover by clicking outside? also tried Boot strapX clickover plugin: https://stackoverflow.com/a/11029479/1043817) But I cannot get it working via those methods.

我已经使用在页面上使用代码的方式创建了JSFiddle: http://jsfiddle .net/FYNLL/(尽管我使用的是v2.2.2，但JSFiddle使用的是v2.0.2.的JS.我认为这些版本存在一些差异.当我在本地使用v2.2.2时，弹出窗口不是在单击链接之前一直显示.在JSFiddle中，它显示在悬停状态.要清楚，我希望在单击链接后显示它，而不是悬停显示)

I've created a JSFiddle with the way I have the code being used on my page: http://jsfiddle.net/FYNLL/ (Though I am using v2.2.2, The JSFiddle is using JS from v2.0.2. I think there are some differences in these version. When I use v2.2.2 locally, popover isn't displayed until I've clicked on the link. In the JSFiddle it is being displayed on hover. To be clear I want it displayed after a link has been clicked, not on hover)

我要完成的工作是，只要单击弹出框外部的区域，就隐藏该弹出框.如果单击了另一个弹出窗口链接，则我希望第一个弹出窗口关闭，而单击一个弹出窗口以打开.

What I am trying to accomplish is to hide the popover whenever an area outside of the popover is clicked. If another popover link is clicked I'd like the first popover to close and the one being clicked on to open.

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

Also this isn't absolutely necessary but I cannot get popover to work when it is in the .js file (I've tried using .each()). I'd really like to get rid of <script> $(function () { $("a[rel=popover]").popover(); });</script> from my HTML files. Again, this isn't really a priority.

推荐答案

// 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();
    }
});

这篇关于弹出框:在弹出框外单击时关闭弹出框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！