twitter-bootstrap - 如何通过单击外部来关闭 Twitter Bootstrap 弹出窗口？

Question

我们可以像模态框一样让弹出框被关闭吗，即。当用户点击它们之外的某个地方时让它们关闭？

不幸的是，我不能只使用真正的模态而不是弹出框，因为模态意味着位置：固定，那将不再是弹出框了。:(

score 480 · Accepted Answer

更新：更强大的解决方案：http: //jsfiddle.net/mattdlockyer/C5GBU/72/

对于仅包含文本的按钮：

$('body').on('click', function (e) {
    //did not click a popover toggle or popover
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
});

对于包含图标的按钮使用（此代码在 Bootstrap 3.3.6 中有一个错误，请参阅此答案中的以下修复）

$('body').on('click', function (e) {
        //did not click a popover toggle, or icon in popover toggle, or popover
        if ($(e.target).data('toggle') !== 'popover'
            && $(e.target).parents('[data-toggle="popover"]').length === 0
            && $(e.target).parents('.popover.in').length === 0) { 
            $('[data-toggle="popover"]').popover('hide');
        }
    });

对于 JS 生成的 Popovers使用'[data-original-title]'代替'[data-toggle="popover"]'

警告：上面的解决方案允许同时打开多个弹出窗口。

请一次弹出一个：

更新： Bootstrap 3.0.x，见代码或小提琴http://jsfiddle.net/mattdlockyer/C5GBU/2/

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

这将处理已打开且未单击的弹出框的关闭，或者它们的链接尚未被单击。

更新： Bootstrap 3.3.6，见小提琴

修复关闭后需要点击 2 次才能重新打开的问题

$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').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('hide').data('bs.popover')||{}).inState||{}).click = false  // fix for BS 3.3.6
        }

    });
});

更新：使用之前改进的条件，实现了这个解决方案。修复双击和重影弹窗问题：

$(document).on("shown.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','1');
});
$(document).on("hidden.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','0');
});
$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').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) {
            if($(this).attr('someattr')=="1"){
                $(this).popover("toggle");
            }
        }
    });
});

score 84 · Accepted Answer

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

score 43 · Accepted Answer

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

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

score 20 · Accepted Answer

使用引导程序 2.3.2，您可以将触发器设置为“焦点”，它就可以工作：

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

score 19 · Accepted Answer

没有一个所谓的高票解决方案对我有用。当第一次打开和关闭（通过单击其他元素）弹出框后，每个都会导致一个错误，它不会再次打开，直到您在触发链接上单击两次而不是一次。

所以我稍微修改了一下：

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

score 18 · Accepted Answer

这基本上不是很复杂，但是需要进行一些检查以避免故障。

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

score 11 · Accepted Answer

我制作了一个 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');
});

score 9 · Accepted Answer

9

只需将此属性与元素添加

data-trigger="focus"

于 2017-07-06T11:49:36.330 回答

score 6 · Accepted Answer

只需将此属性添加到 html 元素即可在下次单击时关闭弹出框。

data-trigger="focus"

来自https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click的参考

score 5 · Accepted Answer

根据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'
})

score 3 · Accepted Answer

这已经在这里问过了。我当时给出的相同答案仍然适用：

我也有类似的需求，并找到了 Lee Carmichael 的 Twitter Bootstrap Popover 的这个很棒的小扩展，称为 BootstrapX - clickover。他在这里也有一些使用示例。基本上，它将弹出框更改为交互式组件，当您单击页面上的其他位置或弹出框内的关闭按钮时，该组件将关闭。这也将允许同时打开多个弹出框和许多其他不错的功能。

score 3 · Accepted Answer

派对迟到了……但我想我会分享的。我喜欢弹出框，但它的内置功能太少了。我写了一个引导扩展 .bubble() ，这就是我想要的 popover 的一切。四种解除方法。单击外部，打开链接，单击 X，然后单击转义。

它会自动定位，因此它永远不会离开页面。

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

这不是无缘无故的自我推销……我这辈子抓过别人的代码很多次，我想贡献自己的力量。试一试，看看它是否适合你。

score 3 · Accepted Answer

修改后的接受解决方案。我所经历的是，在隐藏了一些弹出框之后，它们必须被点击两次才能再次出现。这是我为确保 popover('hide') 不会在已经隐藏的弹出窗口上被调用所做的工作。

$('body').on('click', function (e) {
    $('[data-original-title]').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 popoverElement = $(this).data('bs.popover').tip();
            var popoverWasVisible = popoverElement.is(':visible');

            if (popoverWasVisible) {
                $(this).popover('hide');
                $(this).click(); // double clicking required to reshow the popover if it was open, so perform one click now
            }
        }
    });
});

score 3 · Accepted Answer

此解决方案工作正常：

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

score 2 · Accepted Answer

jQuery("#menu").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); });

score 2 · Accepted Answer

您还可以使用事件冒泡从 DOM 中删除弹出窗口。它有点脏，但工作正常。

$('body').on('click touchstart', '.popover-close', function(e) {
  return $(this).parents('.popover').remove();
});

在您的 html 中，将 .popover-close 类添加到应该关闭弹出框的弹出框内的内容中。

score 2 · Accepted Answer

如果您使用选择器委托创建弹出框，“隐藏”方法似乎不起作用，而必须使用“销毁”。

我让它像这样工作：

$('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在这里

score 2 · Accepted Answer

我们发现@mattdlockyer 的解决方案存在问题（感谢您的解决方案！）。当像这样使用 popover 构造函数的选择器属性时......

$(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');由于委托的侦听器，将创建第二个实例。提供的解决方案仅隐藏已经实例化的弹出框。

我希望我能为你们节省一些时间。

score 2 · Accepted Answer

Bootstrap原生支持这一点：

JS Bin 演示

下次单击时关闭所需的特定标记

对于正确的跨浏览器和跨平台行为，您必须使用<a>标签，而不是<button>标签，并且您还必须包含role="button"andtabindex属性。

score 2 · Accepted Answer

此解决方案在第二次显示弹出框时消除了讨厌的第二次点击

使用 Bootstrap v3.3.7 测试

$('body').on('click', function (e) {
    $('.popover').each(function () {
        var popover = $(this).data('bs.popover');
        if (!popover.$element.is(e.target)) {
            popover.inState.click = false;
            popover.hide();                
        }
    });
});

score 2 · Accepted Answer

我已经尝试了许多以前的答案，对我来说真的没有任何效果，但这个解决方案确实：

https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click

他们建议使用锚标签而不是按钮，并注意 role="button" + data-trigger="focus" + tabindex="0" 属性。

前任：

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" 
data-trigger="focus" title="Dismissible popover" data-content="amazing content">
Dismissible popover</a>

score 2 · Accepted Answer

引导程序 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');
        } 
    });
})

score 1 · Accepted Answer

我想出了这个：我的场景在同一页面上包含更多弹出框，隐藏它们只会使它们不可见，因此，无法单击弹出框后面的项目。这个想法是将特定的弹出框链接标记为“活动”，然后您可以简单地“切换”活动的弹出框。这样做将完全关闭弹出框 $('.popover-link').popover({ html : true, container: '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"

score 1 · Accepted Answer

我只是在显示新弹出框之前删除其他活动弹出框（引导程序 3）：

$(".my-popover").popover();

$(".my-popover").on('show.bs.popover',function () {
    $('.popover.in').remove();
});

score 1 · Accepted Answer

@guya 的答案有效，除非您在弹出窗口中有日期选择器或时间选择器之类的东西。为了解决这个问题，这就是我所做的。

if (typeof $(e.target).data('original-title') === 'undefined' && 
    !$(e.target).parents().is('.popover.in')) {
        var x = $(this).parents().context;
        if(!$(x).hasClass("datepicker") && !$(x).hasClass("ui-timepicker-wrapper")){
            $('[data-original-title]').popover('hide');
        }
}

score 1 · Accepted Answer

用 3.3.6 测试，第二次点击没问题

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

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

score 0 · Accepted Answer

演示：http: //jsfiddle.net/nessajtr/yxpM5/1/

var clickOver = clickOver || {};
clickOver.uniqueId = $.now();

clickOver.ClickOver = function (selector, options) {
    var self = this;

    //default values
    var isVisible, clickedAway = false;

    var callbackMethod = options.content;
var uniqueDiv = document.createElement("div");
var divId = uniqueDiv.id = ++clickOver.uniqueId;
uniqueDiv.innerHTML = options.loadingContent();

options.trigger = 'manual';
options.animation = false;
options.content = uniqueDiv;

self.onClose = function () {
    $("#" + divId).html(options.loadingContent());
    $(selector).popover('hide')
    isVisible = clickedAway = false;
};
self.onCallback = function (result) {
    $("#" + divId).html(result);
};

$(selector).popover(options);

//events
$(selector).bind("click", function (e) {
    $(selector).filter(function (f) {
        return $(selector)[f] != e.target;
    }).popover('hide');

    $(selector).popover("show");
    callbackMethod(self.onCallback);

    isVisible = !(clickedAway = false);
});

$(document).bind("click", function (e) {
    if (isVisible && clickedAway && $(e.target).parents(".popover").length == 0) {
        self.onClose();
        isVisible = clickedAway = false;
    } else clickedAway = true;
});

}

这是我的解决方案。

score 0 · Accepted Answer

这种方法确保您可以通过单击页面上的任意位置来关闭弹出框。如果您单击另一个可单击实体，它会隐藏所有其他弹出框。动画：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')

score 0 · Accepted Answer

好的，这是我第一次尝试在 stackoverflow 上实际回答一些问题，所以这里什么都没有：P

似乎不太清楚这个功能在最新的引导程序上是否真的开箱即用（好吧，如果你愿意妥协用户可以点击的地方。我不确定你是否必须把'点击悬停”本身，但在 iPad 上，单击用作切换。

最终结果是，您可以在桌面上悬停或单击（大多数用户会悬停）。在触摸设备上，触摸元素会将其抬起，再次触摸会将其取下。当然，这与您的原始要求略有妥协，但至少您的代码现在更干净了:)

$(".my-popover").popover({ trigger: 'click hover' });

score 0 · Accepted Answer

使用 Matt Lockyer 的代码，我做了一个简单的重置，这样 dom 就不会被隐藏的元素覆盖。

马特的代码： http: //mattlockyer.com/2013/04/08/close-a-twitter-bootstrap-popover-when-clicking-outside/

小提琴：http: //jsfiddle.net/mrsmith/Wd2qS/

    $('body').on('click', function (e) {
    //hide popover from dom to prevent covering elements
    $('.popover').css('display', 'none');
    //bring popover back if trigger element is clicked
    $('[data-toggle="popover"]').each(function () {
        if ($(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $('.popover').css('display', 'block');
        }
    });
    //hide popover with .popover method
    $('[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('hide');
        }
    });
});

score 0 · Accepted Answer

试试这个，这将通过单击外部隐藏。

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

score 0 · Accepted Answer

我在使用 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 会删除元素，因此选择器部分在初始化弹出框时很重要。

score 0 · Accepted Answer

$('html').on('click.popover', function (e) {
    var allpopins = $('.popover.in');
    if (allpopins.has(e.target).length > 0 &&
        !$('.btn', allpopins).is(e.target))
        return;
    // recognise pop-up 
    var id = $(e.target).attr('aria-describedby');
    var popin = $("#" + id);
    //on any button click in entire pop-up hide this pop-ups
    $(popin).on(".btn", function () { popin.remove(); });
    // on any place out of entire popup hide all pop-ups 
    $('.popover.in').not(popin).remove();
});

这是我最好的性能解决方案。干杯。

score 0 · Accepted Answer

答案非常好，只是添加一个角度指令，以防你像我一样使用角度：

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>

它应该像 use 一样简单data-trigger='click focus'，因为根据引导程序：

弹出框是如何触发的 - 点击 | 悬停 | 焦点 | 手动的。您可以传递多个触发器；用空格分隔它们。手动不能与任何其他触发器结合使用。

但是，由于未知原因，同时使用单击和聚焦对我不起作用，而是我必须手动切换它。

score 0 · Accepted Answer

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

  });
});

score 0 · Accepted Answer

已接受答案的最新更新存在问题：如果您启用了一些工具提示并打开一个弹出框，然后单击具有工具提示的元素，则工具提示的文本将显示为弹出框。

为了防止这种情况，只需添加

 if ($(this).data('bs.popover')) {

在 if 语句中（或将其与 && 连接到 if 语句中）

// only show one popover at the time and hide on clicking outside
$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').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) {
            if ($(this).data('bs.popover')) {
                (($(this).popover('hide').data('bs.popover') || {}).inState || {}).click = false  // fix for BS 3.3.6
            }
        }
    });
});

score 0 · Accepted Answer

我找到了一个很好且简单的解决方案来解决这个问题。这样做，我们只在需要时激活一个事件监听器。此外，我们没有出现弹出窗口不出现的问题，因为解除弹出窗口的事件同时触发。

将弹出框添加到 HTML

   <input id="popoverId" type="text" data-toggle="popover" data-trigger="manual" data-content="Popover content">

需要时显示弹出框。

$('#popoverId').popover('show');

将此侦听器添加到您的 Javascript。这个监听器将在弹出框显示后立即触发，并将一个监听器附加到主体上，当用户单击页面主体上的任何位置时，它将隐藏弹出框，然后删除事件监听器，直到再次显示弹出框。

$('#popoverId').on('shown.bs.popover', function () {
    $('body').click(function () {
        $('#popoverId').popover('hide');
        $('body').off();
    });
});

score 0 · Accepted Answer

根据最高的两个答案，我有一个小问题：

<span class="btn btn-info btn-minier popover-info" data-rel="popover"
                                              data-placement="bottom" data-html="true" title=""
                                              data-content="popover-content"
                                              data-original-title="popover-title">
                                            <i class="ace-icon fa fa-info smaller-100"></i>
                                        </span>

            $('[data-rel=popover]').popover({html: true});
            $(document).on("shown.bs.popover", '[data-rel=popover]', function () {
                $('[data-rel="popover"][popover-show="1"]').popover('hide');
                $(this).attr('popover-show', '1');
            });
            $(document).on("hidden.bs.popover", '[data-rel=popover]', function () {
                if ($(this).attr('popover-show') === '0') {
                    // My important fix: using bootstrap 3.4.1, if hide popover by .popover('hide') and click to show, popover internal treat it is already shown and dispatch hidden event immediately without popover anything.
                    $(this).popover('toggle');
                } else {
                    $(this).attr('popover-show', '0');
                }
            });
            $('html').on('click', function (e) {
                if (typeof $(e.target).data('original-title') == 'undefined'
                    && typeof $(e.target).parent().data('original-title') == 'undefined'
                    && !$(e.target).parents().is('.popover.in')) {
                    $('[data-rel="popover"][popover-show="1"]').popover('hide');
                }
            });

score 0 · Accepted Answer

对于正在寻找适用于 Bootstrap 5 而没有 jQuery 的解决方案的任何人，即使弹出框是动态生成的（即手动触发）：

document.querySelector('body').addEventListener('click', function(e) {
    var in_popover = e.target.closest(".popover");

    if (!in_popover) {
        var popovers = document.querySelectorAll('.popover.show');

        if (popovers[0]) {
            var triggler_selector = `[aria-describedby=${popovers[0].id}]`;

            if (!e.target.closest(triggler_selector)) {
                let the_trigger = document.querySelector(triggler_selector);
                if (the_trigger) {
                    bootstrap.Popover.getInstance(the_trigger).hide();
                }
            }
        }
    }
});

score -2 · Accepted Answer

-2

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

于 2016-07-27T14:30:26.977 回答

score -2 · Accepted Answer

-2

只需设置data-trigger="focus click"

于 2020-10-06T10:56:13.967 回答

twitter-bootstrap - 如何通过单击外部来关闭 Twitter Bootstrap 弹出窗口？

41 回答 41

HTML

JS

Related

Reference