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

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


当前回答

这对我很管用。

分解:

首先,向主体添加一个单击事件侦听器。

单击,检查是否有一个带有弹窗类的元素(Bootstrap在解散时从DOM中删除弹窗元素)。

如果.popover元素存在,请检查事件。目标,它会告诉你用户在页面上点击了哪里。如果它是.popover元素的一部分,什么都不做。如果不是,隐藏弹窗(文档在这里)。

注意:aria- descripbedby条件可以防止弹窗在最初被触发/显示时被隐藏。

document.body。addEventListener('点击',事件=> { let ispopoverdisplays = Boolean(document.querySelector('.popover')); let isclickknotpopover = !event.target. nearest ('.popover'); 如果( isPopoverShown & & isClickNotPopover & & ! event.target ? .getAttribute (aria-describedby) ? .startsWith(窗) ) { $ (' .popover ') .popover(隐藏的) } })

其他回答

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

  });
});

我做了一个jsfiddle来告诉你如何做到这一点:

http://jsfiddle.net/3yHTH/

其思想是在单击按钮时显示弹出窗口,在单击按钮外时隐藏弹出窗口。

HTML

<a id="button" href="#" class="btn btn-danger">Click for popover</a>

JS

$('#button').popover({
    trigger: 'manual',
    position: 'bottom',
    title: 'Example',
    content: 'Popover example for SO'
}).click(function(evt) {
    evt.stopPropagation();
    $(this).popover('show');
});

$('html').click(function() {
    $('#button').popover('hide');
});

使用bootstrap 2.3.2,你可以将触发器设置为“focus”,它就可以工作了:

$('#el').popover({trigger:'focus'});

我们发现我们从@mattdlockyer的解决方案中有一个问题(感谢解决方案!)当像这样使用弹出窗口构造函数的selector属性时…

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

...BS3的解决方案行不通。相反,它会在$(this)的本地创建第二个弹出窗口实例。以下是我们预防这种情况的解决方案:

$(document.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) {
            var bsPopover = $(this).data('bs.popover'); // Here's where the magic happens
            if (bsPopover) bsPopover.hide();
        }
    });
});

如前所述,$(this).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'
})