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

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


当前回答

$("body").find('.popover').removeClass('in');

其他回答

这个派对来得太晚了……但我想分享一下 我喜欢弹窗,但是它的内置功能太少了。我写了一个引导扩展.bubble(),这就是我想要的弹窗的一切。四种解题方法。单击外部,切换链接,单击X,然后单击escape。

它会自动定位,所以永远不会离开页面。

https://github.com/Itumac/bootstrap-bubble

这不是毫无理由的自我推销……在我的生活中,我已经多次获得别人的代码,我想贡献我自己的努力。试一试,看看是否对你有用。

这对我很管用。

分解:

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

单击,检查是否有一个带有弹窗类的元素(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(隐藏的) } })

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

$('#el').popover({trigger:'focus'});
$(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
    }

  });
});

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

演示: 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');
  }
});