Twitter-bootstrap popover 不允许下面的内容起作用

Question

我有一个带有 3 个 Twitter 引导弹出按钮的页面，单击这些按钮会显示一个带有 HTML 内容的隐藏 div。我在右上角添加了一个 X 来关闭弹出框。

我的问题发生在弹出窗口打开并覆盖其下方的内容然后关闭时，它下方的内容即链接到另一个页面的按钮不再可访问并且您无法再单击它。

在检查器中，我可以看到隐藏的弹出框，即带有内容的 div，位于我要单击的按钮的顶部，因此我无法访问它。

奇怪的是，当我点击实际的弹出框按钮关闭弹出框时，它完全消失了，我可以点击下面的按钮，但是当我点击关闭 X 时，我不能。

我该如何解决这个问题？

页面链接：(http://bit.ly/1j1AW4i)

按钮代码：

<button id="popoverBtn1" class="popoverThis btn btn-default" data-placement='bottom'>
    Learn More <span class="glyphicon glyphicon-circle-arrow-right"></span>
</button>
<div id="popoverContent1" class="hide">
    <strong>Ideal for:</strong> Qualified clients who want to continue having the convenient access to funds that a home equity line of credit provides.
    <br /><br />
    <strong>What:</strong> Apply for a new Access 3<sup>&reg;</sup> Equity Line and transfer your current balance to the new line. <a target="_blank" href="https://www.suntrust.com/PersonalBanking/Loans/EquityLinesOfCreditAndLoans/EquityLineOfCredit">Learn More</a> about our Access 3<sup>&reg;</sup> Equity Line.
    <br /><br />
    <strong>Get started:</strong> <a target="_blank" href="https://www.suntrust.com/portal/server.pt?space=Redirect&amp;CommunityID=1805&amp;ui_ProdGroup=IL&amp;ui_ProdSubGroup=EQLN&amp;ui_Product=INETACCX&amp;POPNAC=T">Apply Online</a>, Call <span class="blue">877-748-4059</span>, or stop by your <a target="_blank" href="https://www.suntrust.com/FindUs">local branch</a>.
</div>

脚本代码：

$('#popoverBtn1').popover({
    html: true,
    title: '<a class="close popoverThis">&times;</a>',
    content: $('#popoverContent1').html(),
});
$('#popoverBtn2').popover({
    html: true,
    title: '<a class="close popoverThis">&times;</a>',
    content: $('#popoverContent2').html(),
});
$('#popoverBtn3').popover({
    html: true,
    title: '<a class="close popoverThis">&times;</a>',
    content: $('#popoverContent3').html(),
});

$('.popoverThis').click(function (e) {
    e.stopPropagation();
});

$(document).click(function (e) {
    if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
        $('.popoverThis').popover('hide');
    }
});

Answer 1

这是一种选择：

$('#popoverBtn1').popover({
    html: true,
    title: '<a class="close popoverThis">×</a>',
    content: $('#popoverContent1').html(),
});
$(document).on('click','.close',function (e) {
    $(this).closest('.popover').css('z-index','-1');
    $(this).closest('.popover').prev('button').popover('hide');
});
$('button.popoverThis').on('show.bs.popover', function () {
  $(this).next('.popover').css('z-index','100');
});

例子：

http://www.bootply.com/106588

更新

改用这个：

$(document).on('click','.close',function (e) {
    $(this).closest('.popover').hide();
    $(this).closest('.popover').prev('button').popover('hide');
});

http://www.bootply.com/106678

Answer 2

尝试改变：

$(document).click(function (e) {
if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
    $('.popoverThis').popover('hide');
}

});

到：

$(document).click(function (e) {
if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
    $('.popoverThis').click();
}

});