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

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


当前回答

这个问题之前已经被问到过了。我当时给出的答案仍然适用:

我也有类似的需求,并找到了这个很棒的小扩展的Twitter引导弹窗由李卡迈克尔,称为BootstrapX -点击。他还提供了一些用法示例。基本上,它会将弹出窗口更改为一个交互式组件,当您单击页面的其他地方或弹出窗口中的关闭按钮时,该组件将关闭。这也将允许多个弹窗一次打开和一堆其他不错的功能。

其他回答

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

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

这种方法确保您可以通过单击页面上的任何位置来关闭弹出窗口。如果你点击另一个可点击的实体,它会隐藏所有其他弹窗。animation:false是必需的,否则你将在你的控制台得到jquery .remove错误。

$('.clickable').popover({
 trigger: 'manual',
 animation: false
 }).click (evt) ->
  $('.clickable').popover('hide')
  evt.stopPropagation()
  $(this).popover('show')

$('html').on 'click', (evt) ->
  $('.clickable').popover('hide')

我有问题与mattdlockyer的解决方案,因为我设置弹窗链接动态使用如下代码:

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

所以我必须这样修改它。它为我解决了很多问题:

$('html').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');
    }
  });
});

记住destroy删除元素,所以选择器部分在初始化弹窗时很重要。

$('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");
        });
    }
});

这基本上不是很复杂,但有一些检查要做,以避免故障。

演示(jsfiddle)

var $poped = $('someselector');

// Trigger for the popover
$poped.each(function() {
    var $this = $(this);
    $this.on('hover',function() {
            var popover = $this.data('popover');
            var shown = popover && popover.tip().is(':visible');
            if(shown) return;        // Avoids flashing
            $this.popover('show');
    });
});

// Trigger for the hiding
 $('html').on('click.popover.data-api',function() {
    $poped.popover('hide');
});