CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbuttonpopover
Terri Swiatek
Terri Swiatek

Reputation: 487

Twitter-bootstrap popover does not allow content below to function

I've got a page with 3 Twitter-bootstrap popover buttons that on click display a hidden div with HTML content. I've added an X in the top right corner to close the popover box.

My problem occurs when a popover is opened up and overlays content below it, and then is closed, the content below it i.e. a button that links to another page is no longer accessible and you cannot click it anymore.

In the inspector I can see that the hidden popover, the div with content, is there sitting on top of the button I want to click so I cannot access it.

Curious thing is that when I click the actual popover button to close the popover it is totally gone and I can click the button below but when I click the closing X I cannot.

How can I fix this?

Link to page: (http://bit.ly/1j1AW4i)

Button code:

<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>

Script code:

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

Upvotes: 1

Views: 1343

Answers (2)

Trevor
Trevor

Reputation: 16116

Here is one option:

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

Example:

http://www.bootply.com/106588

Update

use this instead:

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

http://www.bootply.com/106678

Upvotes: 1

Cognitronic
Cognitronic

Reputation: 1436

Try changing:

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

});

to:

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

});

Upvotes: 1

Related Questions