我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?

不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(


当前回答

如果你使用选择器委托创建弹出窗口,那么'hide'方法似乎不起作用,而必须使用'destroy'。

我是这样做的:

$('body').popover({
    selector: '[data-toggle="popover"]'
});

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('destroy');
        }
    });
});

关于这个课题JSfiddle

其他回答

最简单,最安全的版本,适用于任何引导版本。

演示: http://jsfiddle.net/guya/24mmM/

演示2:在弹出窗口内容中单击时不会解散 http://jsfiddle.net/guya/fjZja/

演示3:多个弹窗: http://jsfiddle.net/guya/6YCjW/


简单地调用这一行将会解散所有弹窗:

$('[data-original-title]').popover('hide');

当点击外部时,用下面的代码解散所有弹出窗口:

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined') {
    $('[data-original-title]').popover('hide');
  }
});

上面的代码片段在主体上附加了一个单击事件。 当用户点击弹出窗口时,它会正常运行。 当用户点击非弹窗的东西时,它会关闭所有弹窗。

它还可以与Javascript启动的弹窗一起工作,而不是其他一些不工作的例子。(详见演示)

如果你不想在点击弹出窗口内容时取消,请使用以下代码(参见第二个演示的链接):

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
  }
});

答案很好,只要添加一个angular指令,以防你像我一样使用angular:

app.directive('popover', ['$document', function($document) {
    return {
        restrict: 'EA',
        link: function(scope, elem, attrs) {
            $(document).ready(function() {
                $('[data-toggle="popover"]').popover();
            });

            elem.bind('click', function(e) {
                $('#notification').popover('toggle');
            })

            $('body').on('click', function (e) {
                //the 'is' for buttons that trigger popups
                //the 'has' for icons within a button that triggers a popup
                if (!elem.is(e.target)
                    && elem.has(e.target).length === 0
                    && $('.popover').has(e.target).length === 0) {
                    elem.popover('hide');
                }
            });
        }
    };
}]);

html代码:

<a popover tabindex="0" role="button"
   id="notification"
   data-toggle="popover" data-trigger="manual"
   data-container="body" data-placement="bottom"
   data-content="This is a popover">
   Popover button
</a>

它应该像使用data-trigger='click focus'一样简单,因为根据bootstrap:

弹出窗口如何触发-点击|悬停|焦点|手动。你可以传递多个触发器;用一个空格把它们分开。手动不能与任何其他触发器结合使用。

然而,由于未知的原因,同时使用点击和聚焦并不适合我,相反,我必须手动切换它。

引导5更新:

$(document).on('click', function (e) {
    var
        $popover,
        $target = $(e.target);

    //do nothing if there was a click on popover content
    if ($target.hasClass('popover') || $target.closest('.popover').length) {
        return;
    }

    $('[data-bs-toggle="popover"]').each(function () {
        $popover = $(this);

        if (!$popover.is(e.target) &&
            $popover.has(e.target).length === 0 &&
            $('.popover').has(e.target).length === 0)
        {
            $popover.popover('hide');
        } 
    });
})
$('html').on('mouseup', function(e) {
    if(!$(e.target).closest('.popover').length) {
        $('.popover').each(function(){
            $(this.previousSibling).popover('hide');
        });
    }
});

这将关闭所有弹出窗口,如果你点击任何地方,除了一个弹出窗口

更新引导4.1

$("html").on("mouseup", function (e) {
    var l = $(e.target);
    if (l[0].className.indexOf("popover") == -1) {
        $(".popover").each(function () {
            $(this).popover("hide");
        });
    }
});

所谓的高投票的解决方案对我来说都不正确。 当第一次打开和关闭(通过单击其他元素)弹出窗口后,它不会再次打开,直到你在触发链接上单击两次而不是一次,这将导致一个错误。

所以我稍微修改了一下:

$(document).on('click', function (e) {
    var
        $popover,
        $target = $(e.target);

    //do nothing if there was a click on popover content
    if ($target.hasClass('popover') || $target.closest('.popover').length) {
        return;
    }

    $('[data-toggle="popover"]').each(function () {
        $popover = $(this);

        if (!$popover.is(e.target) &&
            $popover.has(e.target).length === 0 &&
            $('.popover').has(e.target).length === 0)
        {
            $popover.popover('hide');
        } else {
            //fixes issue described above
            $popover.popover('toggle');
        }
    });
})