点击屏幕任意位置关闭所有AngularJS Bootstrap弹出框？

Question

我正在使用Angular指令来启用Bootstrap。

我的弹出框与他们的示例相同：

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

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

我没有看到内置的方法来实现这一点。

- Steve

Answer 1

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);

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

- Lauren Campregher

---

我能找到的最佳答案 - Oleg

我想做的一件事是扩展跳过条件：if (popupElement[0].previousSibling != e.target && popupElement[0].previousSibling != e.target.parentElement) { - Oleg

非常好用，但请确保您没有使用 popover-append-to-body="true"，否则它将无法正常工作。 - cyberwombat

Answer 2

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

- Melian Galovic

---

对Lauren Campregher的答案进行了小改进，无需删除元素（重新打开弹出窗口时会创建错误），只需要刷新弹出窗口的父级作用域即可（popupElement.scope().$parent.$apply();）。 - Melian Galovic

Answer 3

这个功能请求正在跟踪中（https://github.com/angular-ui/bootstrap/issues/618）。与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在上述功能请求的评论中提到）

此功能请求还有一种非jQuery解决方案，以及这个plnkr：http://plnkr.co/edit/fhsy4V

- sonara

Answer 4

我正在使用以下代码

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

- Anjum....

Answer 5

一个想法是你可以改变触发器使用鼠标进入和退出，这将确保一次只显示一个弹出窗口。以下是一个例子：

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

你可以在这个 Plunker中看到它的工作原理。你可以在 Angular Bootstrap 网站上找到整个提示触发器列表（工具提示和弹出框具有相同的触发选项）。祝你好运！

- drew_w

Answer 6

我有同样的需求，这是我们的解决方法： 首先，我们修改了bootstrap，在tooltip的链接函数中：

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

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

$('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

---

为避免编辑引导程序，只需将$('.popover-link')选择器替换为类似$('[popover-trigger="click"]')的内容。 - Andy Baker

Answer 7

你所说的是弹出框的默认设置，但你可以通过触发器函数来控制它，将模糊效果放在触发器的第二个参数中，像这样：popover-trigger="{mouseenter:blur}"

- mautrok

Answer 8

谢谢Lauren Campregher，这个有用。

你的代码是唯一一个也在作用域上运行状态更改的代码。

只配置了如果您单击弹出窗口，后者将关闭。

我混合了您的代码，现在如果您在弹出窗口内单击，它也可以工作。

无论是系统，还是通过popover-template完成，

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

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

        }
    }
});

祝你有美好的一天，感谢Lauren，感谢AngularJS，非常感谢Stack Family！

更新：

我进行了更新并添加了额外的控制。弹出窗口内的元素被排除在控制之外（例如，插入到弹出窗口主体中的图片）。然后点击相同的关闭。

我使用了API Node.contains命令来解决问题，并将其集成到一个返回true或false的函数中。

现在，无论放置哪个元素，都会运行该控件，并在单击内部时保持弹出窗口打开：

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

        }
    }
});

- dbweb