5

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

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

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

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

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

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

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

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

5 回答 5

3

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

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

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

selector: '[rel="popover"]'

在你的情况下，它会是

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

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

于 2013-09-03T22:03:50.333 回答
2

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

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

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

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

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

于 2014-04-14T18:54:23.443 回答
2

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

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

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

希望能帮助到你！

于 2013-10-23T08:00:58.383 回答
1

我遇到了同样的问题，在 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 处理程序，弹出窗口被删除并且不再隐藏屏幕上的元素。此外，对弹出窗口的下一次调用将再次显示它。

我希望它也对你有用！

于 2016-03-07T19:27:49.403 回答
0

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

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

于 2013-09-01T21:39:54.660 回答