Question

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

http://f.cl.ly/items/44382Q2Y3U3t2S450r3w/Skjermbilde%202013-09-01%20kl.%2023.15.58.png

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

http://f.cl.ly/items/0s2v2i193z0u1D0N163D/Skjermbilde%202013-09-01%20kl.%2023.35.34.png

当我在弹出窗口外单击时，所有弹出窗口都被隐藏。这应该可行。我从this Stack Overflow question获得了代码。

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

http://f.cl.ly/items/0T0p422c1A202b2M1J20/Skjermbilde%202013-09-01%20kl.%2023.34.28.png

当我点击加号图标隐藏弹出窗口时，弹出窗口被隐藏（删除？），但是当点击加号外（即页面上的任何位置）时，弹出窗口仍然存在（但不可见）正上方{ {1}}。

请帮忙！这让我很生气.. :(

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

</body>

Answer 1

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

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

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

selector: '[rel="popover"]'

在你的情况下它将是

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

这解决了我所有隐藏的popover点击检测＆＃34;的问题。

Answer 2

这是我为防止隐藏弹出窗口中的元素被点击而做的事情

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

这个想法是，当弹出窗口被隐藏时，你应该从DOM中删除它。

希望它有所帮助！

Answer 3

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

但是我找到了一个非常简单的解决方案，使用css来修复＆＃39;这个问题：

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

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

确保.popover.in具有比其他元素更高的z-index，并且类似于没有.in的z-index具有更低的z-index。

Answer 4

我认为你需要“破坏”弹出窗口，而不仅仅是“隐藏”它。

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

Answer 5

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

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

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

popover的内容仍然存在，隐藏并隐藏页面上的其他元素。

我按下了这个按钮：

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

添加

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

到按钮onClick处理程序，弹出窗口被删除，不再隐藏屏幕上的元素。此外，下一次调用弹出窗口将再次显示它。

我希望它也适合你！

Bootstrap Popover内容在隐藏时可单击

5 个答案: