Bootstrap Popover 内容隐藏时可点击

Question

我的网站在地图上有多个带有可点击图标的弹出框（只是一个带有背景图片的 div）：

单击这些图标时，会显示一个弹出框。此弹出框有一个轮播，其中包含带有链接的文本：

当我在弹出框外部单击时，所有弹出框都被隐藏。这应该可以正常工作。我从this Stack Overflow question得到了代码。

但真正的问题发生在您单击弹出框外部以再次隐藏它时。弹出框是隐藏的，但它仍然在 DOM 中。这意味着链接仍然可以点击！

当我单击加号图标隐藏弹出框时，弹出框被隐藏（删除？），但是当点击加号外部（即页面上的任何位置）时，弹出框仍然存在（但不可见）正上方@ 987654325@.

请帮忙！这让我很恼火.. :(

编辑：可能值得一提的是弹出框是动态添加的：

$('.plus').each(function(i) {

    var $self = $(this);

    $self.popover({
        html: true,
        title: false,
        placement: function() {
            return 'auto left'; // TODO: calculate placing
        },
        content: function() {

            var html   = '<div id="carousel-' + i + '" class="carousel slide">';
            var list   = '<ol class="carousel-indicators">';
            var slides = '<div class="carousel-inner">';

            var count = 0;

            $('.post[data-category="' + $(this).data('category') + '"]').each(function(j) {

                // add indicator for slide
                list += '<li data-target="#carousel-' + i + '" data-slide-to="' + count + '"' + (count == 0 ? ' class="active"' : '') + '></li>';

                // add html for slide
                slides += '<div class="item' + (count == 0 ? ' active' : '') + '">' + $(this).html() + '</div>';

                // increase counter
                count++;

            });

            // merge all html
            html += list + '</ol>' + slides + '</div></div>';

            return html;
        }
    });

Answer 1

我遇到了类似的问题，很头疼，搜索到了这个页面：

https://github.com/twbs/bootstrap/issues/4215

显然，当您将弹出框添加到动态内容时，您需要添加此选项：

selector: '[rel="popover"]'

在你的情况下是

$self.popover({
    selector: '[rel="popover"]'
    html: true,
    title: false,
    ...

这解决了我所有的“隐藏弹出框点击检测”问题。

Answer 2

我这样做是为了防止隐藏弹出框内的元素被点击

$('button.new-history').on('hidden.bs.popover', function () {
    $(this).next().remove();
})

这个想法是当弹出框被隐藏时，你应该将它从 DOM 中移除。

希望对你有帮助！

Answer 3

其他解决方案都不适合我，因为我使用其他功能一次只允许一个弹出框，并在它失去焦点时隐藏弹出框（它们也是动态生成的）。

但我找到了一个非常简单的解决方案，使用 css 来“修复”这个问题：

.popover.fade {
    z-index:-1;
}

.popover.fade.in {
    z-index:2;
}

只要确保 .popover.in 的 z-index 比其他元素高，类似地，没有 .in 的元素的 z-index 较低。

Answer 4

我遇到了同样的问题，在 Chrome 的 F12 模式下搜索了一段时间后，我发现以下解决方案对我有用。

使用按钮手动关闭弹出框后：

<button 
  type=button 
  class="btn btn-default pull-right"
  onclick="$('.mypopoverclass').popover('hide');">
    Close
</button>

弹出框的内容仍然存在，不可见并隐藏了页面上的其他元素。

我把按钮改成了这样：

<button 
  type=button 
  class="btn btn-default pull-right"
  onclick="$('.mypopoverclass').popover('hide'); $('.popover.fade').remove()">
    Close
</button>

通过添加

  $('.popover.fade').remove()

对于按钮 onClick 处理程序，弹出窗口已被移除并且不再隐藏屏幕上的元素。此外，下次调用弹出窗口时，将再次显示它。

我希望它也对你有用！

Answer 5

我认为您需要“销毁”弹出框，而不仅仅是“隐藏”它。

在此处查看 API：http://getbootstrap.com/2.3.2/javascript.html#popovers