Question

I needed to create bubble popups on click, but I ran into trouble with being able to open infinite bubbles. I need only one popup opened at a time, so I added:

if ($(‘.icon’).HasBubblePopup()) { alert(‘Please close current popup before opening another.’); return false; }

My issue is that this alert appears after opening and closing one or two popups, even though it appears no popups are open.

My HTML:

<img id="icon01" class="icon" src="images/icon01.png">
<img id="icon02" class="icon" src="images/icon02.png">
<img id="icon03" class="icon" src="images/icon03.png">

My jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-bubble-popup-v3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var icon01 = 
        '<div class="popup">' +
        '<h2>First Title</h2>' +
        '<p>Sweet jelly beans macaroon cheesecake cookie caramels chocolate cake gummi bears muffin.</p>' +
        '</div>';
    var icon02 = 
        '<div class="popup">' +
        '<h2>Second Title</h2>' +
        '<p>Bonbon lollipop soufflé halvah chupa chups jelly beans.</p>' +
        '</div>';
    var icon03 = 
        '<div class="popup">' +
        '<h2>Third Title</h2>' +
        '<p>Pastry bear claw wafer candy candy sweet roll chocolate bar chocolate cake.</p>' +
        '</div>';

    $('.icon').click(function() {
        var iconID = this.id;

        if ($('.icon').HasBubblePopup()) {
            alert('Please close current popup before opening another.');
            return false;
        }

        $('.icon').CreateBubblePopup();
        var iconClick = $(this);
        var bubblePopupID = iconClick.GetBubblePopupID();
        iconClick.ShowBubblePopup({
            position : 'top',
            align    : 'center',
            innerHtml: eval(iconID),
            innerHtmlStyle: {
                                color:'#000',
                                'text-align':'center'
                            },
            themeName:  'grey',
            themePath:  'images/jquerybubblepopup-themes'
        }, false);

        iconClick.FreezeBubblePopup();
        $('#' + bubblePopupID).click(function() {
            $(iconClick).RemoveBubblePopup();
        });
    });
});
</script>

Page I’m working on: http://www.dynasoft2000.com/fire

Edit: I decided instead of using an alert, closing the current popup and opening the new one would be a better solution. Here’s my final code:

    $('.icon').click(function() {
        var iconID = this.id;

        if ($('.icon').map(function() {
            if ($(this).HasBubblePopup())
                return true;
        })[0]) {
            $('.icon').RemoveBubblePopup();
        }

        var iconClick = $(this);
        iconClick.CreateBubblePopup();
        var bubblePopupID = iconClick.GetBubblePopupID();
        iconClick.ShowBubblePopup({
            position : 'top',
            align    : 'center',
            innerHtml: eval(iconID),
            innerHtmlStyle: {
                                color:'#000',
                                'text-align':'center'
                            },
            themeName:  'grey',
            themePath:  'images/jquerybubblepopup-themes'
        }, false);

        iconClick.FreezeBubblePopup();
        $('#' + bubblePopupID).click(function() {
            $(iconClick).RemoveBubblePopup();
        });
    });

Answer 1

you should relay to current element when creating buble, also HasBublePipup works stange, I wrap it with map;
change code to this:

$('.icon').click(function() {
        var iconID = this.id;

        if ($('.icon').map(
           function() {
            if ($(this).HasBubblePopup()) return true;
            }
           )[0]); { //<-HERE
            alert('Please close current popup before opening another.');
            return false;
        }
        var iconClick = $(this);
        iconClick.CreateBubblePopup(); // <-- AND HERE
        var bubblePopupID = iconClick.GetBubblePopupID();
        iconClick.ShowBubblePopup({
            position : 'top',
            align    : 'center',
            innerHtml: eval(iconID),
            innerHtmlStyle: {
                                color:'#000',
                                'text-align':'center'
                            },
            themeName:  'grey',
            themePath:  'images/jquerybubblepopup-themes'
        }, false);
        iconClick.FreezeBubblePopup();
        $('#' + bubblePopupID).click(function() {
            $(iconClick).RemoveBubblePopup();
        });
    });