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

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


当前回答

如果你使用选择器委托创建弹出窗口,那么'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

其他回答

我想到了这个: 我的场景是在同一个页面上包含更多弹窗,隐藏它们只是让它们不可见,因此,点击弹窗后面的项目是不可能的。 这个想法是将特定的弹出窗口链接标记为“活动”,然后你可以简单地“切换”活动弹出窗口。这样做将完全关闭弹窗 $ (' .popover-link ')。弹出窗口({HTML: true,容器:'body'})

$('.popover-link').popover().on 'shown.bs.popover', ->
  $(this).addClass('toggled')

$('.popover-link').popover().on 'hidden.bs.popover', ->
  $(this).removeClass('toggled')

$("body").on "click", (e) ->
  $openedPopoverLink = $(".popover-link.toggled")
  if $openedPopoverLink.has(e.target).length == 0
    $openedPopoverLink.popover "toggle"
    $openedPopoverLink.removeClass "toggled"
$(document).on('click', function(e) {
  $('[data-toggle="popover"]').each(function() {
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
      $(this).popover('hide').data('bs.popover').inState.click = false
    }

  });
});

如果你使用选择器委托创建弹出窗口,那么'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

这个解决方案很有效:

$("body")   .on('click'     ,'[data-toggle="popover"]', function(e) { 
    e.stopPropagation();
});

$("body")   .on('click'     ,'.popover' , function(e) { 
     e.stopPropagation();
});

$("body")   .on('click'  , function(e) {
        $('[data-toggle="popover"]').popover('hide');
});

根据http://getbootstrap.com/javascript/#popovers,

<button type="button" class="popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="Popover Content">Dismissible popover</button>

使用焦点触发器可以在用户下一次单击时取消弹出窗口。

$('.popover-dismiss').popover({
    trigger: 'focus'
})