在外部单击时关闭带有 HTML 的弹出窗口答案

【问题标题】：Close popover with HTML on click outside在外部单击时关闭带有 HTML 的弹出窗口
【发布时间】：2016-07-29 08:36:33
【问题描述】：

我正在使用 Bootstrap 弹出框，弹出框内容是 HTML。我正在使用下面的代码来初始弹出窗口。此代码基于https://stackoverflow.com/a/13203876/1354727 这个答案。弹出框内容位于 id 为 #song-status-popover 的 div 中。

$(".song-status-link").popover({
            html: true,
            placement: 'bottom',
            content: function () {
                return $("#song-status-popover").html();
            }
});

我想在弹出框外部单击时关闭弹出框，因此我使用了以下代码：

$('html').on('mouseup', function (e) {
            if (!$(e.target).closest('.popover').length) {
                $('.popover').each(function () {
                    $(this).closest('div.popover').popover('hide');
                });
            }
});

到目前为止，它做得很好，但是我在同时使用这两个代码时遇到了一个问题。当我打开弹出框并单击外部以将其关闭时，如果我再次单击链接以打开弹出框，则它不会在第一次单击时打开。我必须点击两次才能打开它。

我想知道我缺少什么以及为什么在通过单击外部将其关闭后无法一键打开弹出框。请帮忙！

更新：我相信当我在外面点击时它会隐藏弹出框，但引导程序仍然认为它是打开的，并且在第一次点击时它实际上认为它已关闭，而在第二次点击时它会打开弹出框。

【问题讨论】：

你能在 jsfiddle 中复制你的错误吗？
你试过这个stackoverflow.com/questions/28558865/…
信不信由你这是最难做的事情。要么让它在悬停时可见并在模糊时隐藏。或者你可以使用默认属性单击显示并单击隐藏。（如果你在同一页面上有多个弹出窗口）。这个问题在 SO 上已经被问过很多次了。
我在一页上有更多的弹出窗口，这使它变得更加困难。您会注意到我使用的是 class 而不是 id 作为目标。但是，我想在所有弹出窗口中打开相同的内容。

标签： jquery css twitter-bootstrap-3 popover

【解决方案1】：

试试下面的代码

$('html').on('click', function(e) {
  if (!$(e.target).is('.song-status-link') && $(e.target).closest('.popover').length == 0) {
    $(".song-status-link").popover('hide');
  }
});

http://jsfiddle.net/xzeb91hf/

【讨论】：

我想这将有助于我在单击外侧时隐藏弹出框。我的脚本已经在这样做了。但是，当我点击链接再次打开弹出框时，我必须点击两次，因为它在第一次点击时没有打开。
为什么要用mouseup事件而不是click事件？
因为这个代码$('html").on('click' 只是限制弹出框被打开，因为它会立即隐藏它。

【解决方案2】：

您必须 .find() 它并使用 :visibile 检查它在 DOM 中的可见性/可用性：

if ($(this).find('.popover:visible').length) {
    $('.popover').popover('hide');
}

【讨论】：

【解决方案3】：

这实际上可以通过 bootstrap 本机实现，唯一的缺点是弹出框内不能有任何可聚焦的元素。

在official documentation 中查找下次点击关闭部分。

它基于焦点事件触发弹出框，以及再次隐藏它的模糊事件。在触发链接之外单击将触发模糊事件，并且弹出框将隐藏。

【讨论】：