单击弹出框以外的任何其他位置时使弹出框消失

Question

我做了一个弹出框。 我想确保如果用户点击弹出框以外的任何地方，弹出框应该关闭。 HTML代码- 新报价1 新报价 新报价

js代码-

    angular.module('myApp', [])
.controller('myCtrl', function($scope){
    $scope.selectedItems = {quote : {label : 'You ngModal now works'}};

    $scope.newQuote = function(){
        alert('It works');
    }
})
.directive('popover', function($compile){
    return {
        restrict : 'A',
        link : function(scope, elem){

            var content = $("#popover-content").html();
            var compileContent = $compile(content)(scope);
            var title = $("#popover-head").html();
            var options = {
                content: compileContent,
                html: true,
                title: title
            };

            $(elem).popover(options);
        }
    }
});

这里是jsfiddle-JsFiddle Link的链接

Answer 1

如果您不想仅将整个 BootstrapUI 包含在弹出窗口中，那么您需要做两件事。首先，您需要在正文或文档级别设置单击事件侦听器，并检查冒泡事件是否源自弹出容器。然后，在指令元素单击的情况下防止事件冒泡也很重要，因此弹出框在打开后不会立即关闭。

整个指令代码：

.directive('popover', function($compile) {

    $('body').on('click', function (e) {
        if (!$(e.target).parents('.popover.in').length) { 
            $('.popover').popover('hide');
        }
    });

    return {
        restrict : 'A',
        link : function(scope, elem){

            var content = $("#popover-content").html();
            var compileContent = $compile(content)(scope);
            var title = $("#popover-head").html();
            var options = {
                content: compileContent,
                html: true,
                title: title
            };

            $(elem).popover(options).click(function(e) {
                e.stopPropagation();
            });
        }
    }
});

顺便说一句，不要将$('body').on('click' 放在指令的链接函数中：您不想在每次链接指令时再绑定一个处理程序。

演示： http://jsfiddle.net/qkwdnjdy/5/

Answer 2

您可以将data-trigger="focus" 属性添加到您的锚标记。它会做必要的事情。这是Fiddle