Twitter-bootstrap popover does not allow content below to function

Question

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

I see that the problem occurs if you use the popover's close button, but not if you click the popover target element a second time to close. — isherwood, Jan 17 '14 at 16:00
Tested in Chrome on Linux, and I can't seem to reproduce the problem... — Patrick Coffey, Jan 17 '14 at 16:03
yes isherwood, that seems to be the problem. unfortunately I need to have the same close function on the popovers 'close X' as I do on the button. — Terri Swiatek, Jan 17 '14 at 16:26
See if my solution works for you. Give me some feedback if it doesn't and I'll look into it. Thanks — Trevor, Jan 17 '14 at 16:52

score 1 · Answer 1 · answered Jan 17 '14 at 16:00

1

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

});

answered Jan 17 '14 at 16:00

Cognitronic

1,426
2
16
29

This allows me to click the button underneath but makes the other 2 hidden popovers display. You can see it in action at the link above. Unfortunately that's not acceptable either. – Terri Swiatek Jan 17 '14 at 16:30

Trevor · Accepted Answer · 2014-01-17T22:45:03.557

1

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

edited Jan 17 '14 at 22:45

answered Jan 17 '14 at 16:26

Trevor

16,080
9
52
83

Trevor I do seem to be having one strange effect from this in IE8. The popovers when closed with the X close button. Seem to remain visible on the page but cut off a bit. But if you close them with the button they do not remain visible. Any ideas on how to remedy this? Thanks for all your help. – Terri Swiatek Jan 17 '14 at 22:19
@TerriSwiatek Yeah try this instead: Well check my update.. I'll update my answer with a new link. Let me know if that update worked for you. – Trevor Jan 17 '14 at 22:43
I've just been testing this out a little more and the Closing 'Xs' don't seem to work on a mobile device. Specifically my iPhone 4s. Any thoughts? Thanks again for your time. – Terri Swiatek Jan 23 '14 at 19:05
If you put an alert inside the click event does it fire? I found this question which might be useful, let me know if you still have trouble. http://stackoverflow.com/questions/10722730/jquery-click-event-not-working-in-mobile-browsers – Trevor Jan 23 '14 at 22:37
@TerriSwiatek forgot to reference you in the last comment, just making sure that you see this. – Trevor Jan 23 '14 at 23:47
Thanks for your help. I'm not sure what most of that means at the link you provided. Would you need to add an alert to this '$(document).on('click','.close',function (e) { $(this).closest('.popover').hide(); $(this).closest('.popover').prev('button').popover('hide');' – Terri Swiatek Feb 06 '14 at 21:03
@TerriSwiatek Yeah, I believe that the click event might not work on a mobile device or there might not be a click event. You could test this by putting an alert in your `$(document).on('click','.close',function (e) {` function to see if the event is even being called. If it's not being called then you might need to use `jQuery` mobile.. The 2nd and 3rd answers on that question would help for that. – Trevor Feb 10 '14 at 15:50

Twitter-bootstrap popover does not allow content below to function

2 Answers2