关闭所有Angular JS Bootstrap弹出窗口,点击屏幕上的任意位置?

[英]Close all Angular JS Bootstrap popovers with click anywhere on screen?


I am using the Angular directives for bootstrap.

我正在使用Angular指令进行引导。

I have a popover as in their example:

我在他们的例子中有一个popover:

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

It closes when you click on the button again. I'd like to close it -- and any other open popovers -- when the user clicks anywhere.

当您再次单击该按钮时它会关闭。当用户点击任何地方时,我想关闭它 - 以及任何其他开放的弹出窗口。

I don't see a built-in way to do this.

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

8 个解决方案

#1


9  

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

#2


2  

This feature request is being tracked (https://github.com/angular-ui/bootstrap/issues/618). Similar to aet's answer, you can do what is recommended in the feature request as a work-around:

正在跟踪此功能请求(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;
        }
    });
});

(source: vchatterji's comment in feature request mentioned above)

(来源:vchatterji在上述功能请求中的评论)

The feature request also has a non-jQuery solution as well as this plnkr: http://plnkr.co/edit/fhsy4V

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

#3


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

#4


0  

What you say it's a default settings of the popover, but you can control it with the triggers function, by putting blur in the second argument of the trigger like this popover-trigger="{mouseenter:blur}"

你说它是弹出窗口的默认设置,但你可以用触发器功能来控制它,方法是在触发器的第二个参数中加入模糊,如popover-trigger =“{mouseenter:blur}”

#5


0  

One idea is you can change the trigger to use mouse enter and exit, which would ensure that only one popover shows at once. The following is an example of that:

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

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

You can see this working in this plunker. You can find the entire list of tooltip triggers on the angular bootstrap site (tooltips and popovers have the same trigger options). Best of luck!

你可以看到这个在这个plunker工作。您可以在角度引导站点上找到工具提示触发器的完整列表(工具提示和弹出窗口具有相同的触发器选项)。祝你好运!

#6


0  

Had the same requirement, and this is how we did it: First, we modified bootstrap, in the link function of the tooltip:

有同样的要求,这就是我们这样做的方法:首先,我们在工具提示的链接功能中修改了bootstrap:

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

Then, we run a click handler on the body like so:

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

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

});

#7


0  

I am using below code for same

我使用下面的代码相同

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

#8


-2  

Thank you Lauren Campregher, this is worked.

谢谢Lauren Campregher,这很有用。

Your code is the only one that also runs the state change on the scope.

您的代码是唯一也在范围内运行状态更改的代码。

Only configured so that if you click on the popover, the latter closes.

仅配置为如果您单击弹出窗口,后者将关闭。

I've mixed your code, and now also it works if you click inside the popover.

我已经混合了你的代码,现在如果你在popover中点击它也可以。

Whether the system, whether done through popover-template,

是否系统,是否通过popover-template完成,

To make it recognizable pop up done with popover-template, I used classes popover- body and popover-title, corresponding to the header and the body of the popover made with the template, and making sure it is pointing directly at them place in the code:

为了使用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();
            }

        }
    }
});

Have ever a good day, thank you Lauren, thank you AngularJS, Thank You So Much Stack Family!

祝你有个美好的一天,谢谢Lauren,谢谢AngularJS,谢谢你这么多Stack Family!

Updated:

更新:

I updated all adding extra control. The elements within the popover were excluded from the control (for example, a picture inserted into the body of the popover.). Then clicking on the same closed.

我更新了所有添加额外控制。弹出窗口中的元素被排除在控件之外(例如,插入到弹出框体中的图片)。然后点击相同的关闭。

I used to solve the command of API Node.contains, integrated in a function that returns true or false.

我曾经解决过API Node.contains的命令,它集成在一个返回true或false的函数中。

Now with any element placed inside, run the control, and keeps the popover open if you click inside :

现在放置任何元素,运行控件,并在内部单击时保持弹出窗口打开:

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

        }
    }
});

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2014/04/07/2b24919b3943526eebb436612db7b370.html



 
© 2014-2018 ITdaan.com 粤ICP备14056181号