Javascript 点击屏幕上的任意位置关闭所有Angular JS引导弹出窗口？

我使用的是引导的角度指令

我有一件府绸，就像他们的例子：

<button popover="Hello, World!" popover-title="Title" class="btn btn-default ng-scope">Dynamic Popover</button>

动态Popover

当您再次单击按钮时，它将关闭。当用户点击任何地方时，我想关闭它和任何其他打开的弹出窗口

---

我看不到一种内置的方法可以做到这一点。

一个想法是，您可以将触发器更改为使用鼠标进入和退出，这将确保一次只显示一个popover。以下是一个例子：

<button popover="I appeared on mouse enter!"
        popover-trigger="mouseenter" class="btn btn-default"
        popover-placement="bottom" >Hello World</button>

你好，世界

---

你可以看到这是可行的。可以在上找到工具提示触发器的完整列表（工具提示和弹出框具有相同的触发器选项）。祝你好运

您所说的是popover的默认设置，但您可以使用触发器功能控制它，方法是在触发器的第二个参数中添加blur，例如

popover trigger=“{mouseenter:blur}”

有相同的要求，我们就是这样做的： 首先，我们在工具提示的链接功能中修改了引导：

if (prefix === "popover") {
    element.addClass('popover-link');
}

然后，我们在主体上运行一个单击处理程序，如下所示：

$('body').on('click', function(e) {
    var clickedOutside = true;
    // popover-link comes from our modified ui-bootstrap-tpls
    $('.popover-link').each(function() {
        if ($(this).is(e.target) || $(this).has(e.target).length) {
            clickedOutside = false;
            return false;
        }
    });
    if ($('.popover').has(e.target).length) {
        clickedOutside = false;
    }
    if (clickedOutside) {
        $('.popover').prev().click();
    }

});

---

正在跟踪此功能请求（）。与aet的回答类似，您可以执行功能请求中建议的解决方法：

$('body').on('click', function (e) {
   $('*[popover]').each(function () {
        //Only do this for all popovers other than the current one that cause this event
        if (!($(this).is(e.target) || $(this).has(e.target).length > 0) 
             && $(this).siblings('.popover').length !== 0 
             && $(this).siblings('.popover').has(e.target).length === 0)                  
        {
             //Remove the popover element from the DOM          
             $(this).siblings('.popover').remove();
             //Set the state of the popover in the scope to reflect this          
             angular.element(this).scope().tt_isOpen = false;
        }
    });
});

（来源：vchatterji在上述功能请求中的评论）

feature请求还有一个非jQuery解决方案以及这个plnkr:

angular.element（document.body）.bind（'click'，function（e）{
var popups=document.querySelectorAll（'.popover'）；
如果（弹出窗口）{
对于（var i=0；i谢谢Lauren Campregher，这已经成功了

您的代码是唯一在作用域上运行状态更改的代码

仅配置为，如果单击popover，后者将关闭

我已经混合了你的代码，现在如果你在弹出框内点击，它也能工作

系统是否，是否通过popover模板完成

为了使用popover模板实现可识别的弹出窗口，我使用了类popover-body和popover title，对应于使用模板制作的popover的标题和正文，并确保它直接指向代码中的它们位置：

angular.element(document.body).bind('click', function (e) {
    var popups = document.querySelectorAll('.popover');
    if(popups) {
        for(var i=0; i<popups.length; i++) {
            var popup = popups[i];
            var popupElement = angular.element(popup);        

            var content;
            var arrow;
            if(popupElement.next()) {
              //The following is the content child in the popovers first sibling
              // For the classic popover with Angularjs Ui Bootstrap
              content = popupElement[0].querySelector('.popover-content');


              // For the templating popover (popover-template attrib) with Angularjs Ui Bootstrap              
              bodytempl = popupElement[0].querySelector('.popover-body');
              headertempl= popupElement[0].querySelector('.popover-title');


              //The following is the arrow child in the popovers first sibling
              // For both cases.
              arrow = popupElement[0].querySelector('.arrow');              
            }



            if(popupElement[0].previousSibling!=e.target && e.target != content && e.target != arrow && e.target != bodytempl && e.target != headertempl){
                popupElement.scope().$parent.isOpen=false;
                popupElement.remove();
            }

        }
    }
});

angular.element（document.body）.bind（'click'，函数（e）{
var popups=document.querySelectorAll（'.popover'）；
如果（弹出窗口）{
对于（var i=0；i
angular.element（document.body）.bind（'click'，function（e））而言{
var popups=document.querySelectorAll（'.popover'）；
如果（弹出窗口）{
对于（变量i=0；i
我正在使用下面的代码进行同样的操作

    angular.element(document.body).popover({
        selector: '[rel=popover]',
        trigger: "click"
    }).on("show.bs.popover", function(e){
        angular.element("[rel=popover]").not(e.target).popover("destroy");
         angular.element(".popover").remove();
    });

为了避免编辑引导，只需将$（'.popover link'）选择器替换为与$（'[popover trigger=“click”]”类似的内容即可。我能找到的最好答案是扩展跳过条件：
if（popupement[0].previousSibling！=e.target&&popupement[0].previousSibling！=e.target.parentElement）{
效果很好，但请确保您没有
popover append-to-body=“true”
否则这将是不可能的。Lauren Campreghers回答的一个小改进是，不需要删除元素，（重新打开popover时会产生一个bug），只需要刷新popover父作用域（popupement.scope（）.$parent.$apply（）；）
// function for checkparent with Node.contains
function check(parentNode, childNode) { if('contains' in parentNode) {      return parentNode.contains(childNode);  }   else {      return parentNode.compareDocumentPosition(childNode) % 16;  }}

angular.element(document.body).bind('click', function (e) {
    var popups = document.querySelectorAll('.popover');
    if(popups) {
        for(var i=0; i<popups.length; i++) {
            var popup = popups[i];
            var popupElement = angular.element(popup);        

            var content;
            var arrow;
            if(popupElement.next()) {
              //The following is the content child in the popovers first sibling
              // For the classic popover with Angularjs Ui Bootstrap
              content = popupElement[0].querySelector('.popover-content');


              // For the templating popover (popover-template attrib) with Angularjs Ui Bootstrap              
              bodytempl = popupElement[0].querySelector('.popover-body');
              headertempl= popupElement[0].querySelector('.popover-title');


              //The following is the arrow child in the popovers first sibling
              // For both cases.
              arrow = popupElement[0].querySelector('.arrow');              
            }

        var checkel= check(content,e.target);

            if(popupElement[0].previousSibling!=e.target && e.target != content && e.target != arrow && e.target != bodytempl && e.target != headertempl&& checkel == false){
                popupElement.scope().$parent.isOpen=false;
                popupElement.remove();
            }

        }
    }
});

        angular.element(document.body).bind('click', function (e) {
            var popups = document.querySelectorAll('.popover');
            if (popups) {
                for (var i = 0; i < popups.length; i++) {
                    var popup = popups[i];
                    var popupElement = angular.element(popup);
                    console.log(2);
                    if (popupElement[0].previousSibling != e.target) {
                        popupElement.scope().$parent.isOpen = false;
                        popupElement.scope().$parent.$apply();
                    }
                }
            }
        });

    angular.element(document.body).popover({
        selector: '[rel=popover]',
        trigger: "click"
    }).on("show.bs.popover", function(e){
        angular.element("[rel=popover]").not(e.target).popover("destroy");
         angular.element(".popover").remove();
    });