Implementing click event for jquery bubble-popup

Question

I'm trying to implement jquery-bubble-popup on my site however I'm completely stuck. I'm trying to do the following.

If somebody clicks on a "report info" div a bubble pop up will show up pertaining to that report.
I want to be able to change things around in the popup and click submit which will post that data to that server.
If one clicks outside of the popup. I want it to simply close.

Pretty simple setup but I'm pulling my hair. Can't get the popup to close without it going haywire.

Fiddle: http://jsfiddle.net/rECnm/1/

jQueryBubblePopup: http://www.maxvergelli.com/jquery-bubble-popup

Code:

$(document).ready(function () {
    $('div.emailReportIcon').CreateBubblePopup({
        manageMouseEvents: false
    });
    $('div.emailReportIcon').click(function (event) {
        var button = $(this);
        var email = button.attr("data-email");
        var message = '<div style="padding:10px;width: 250px;"><p><input type="checkbox"> Email me when new reports are ready.</p>' + '<p>Email Address<br /><input type="text" value="' + email + '"></p>' + '<div >' + '<input type="image" name="submit" value="submit"  class="submitButton">' + '</div></div>';
        button.ShowBubblePopup({
            manageMouseEvents: false,
            position: 'bottom',
            align: 'left',
            tail: {
                align: 'left'
            },
            innerHtml: message,
            innerHtmlStyle: {
                color: '#000',
                'text-align': 'left'
            },
            themePath: 'http://www.maxvergelli.com/docs/jquery-bubble-popup-examples/images/jquerybubblepopup-themes',
            alwaysVisible: false,
            closingDelay: 200,
            selectable: true
        });
    });
});

I tried that however, not sure how to implement that if user is clicking outside of the bubble pop up. — KingKongFrog, Apr 26 '13 at 22:18

score 2 · Accepted Answer · answered Apr 26 '13 at 22:48

http://jsfiddle.net/rECnm/9/

var button = false;
var active = true;
$(document).ready(function () {
    $('div.emailReportIcon').CreateBubblePopup({
        manageMouseEvents: false
    });
    $('div.emailReportIcon').click(function (event) {
        resetActiveBubble();
        button = $(this);
        active = true;
        var email = button.attr("data-email");
        var message = '<div style="padding:10px;width: 250px;"><p><input type="checkbox"> Email me when new reports are ready.</p>' + '<p>Email Address<br /><input type="text" value="' + email + '"></p>' + '<div >' + '<input type="image" name="submit" value="submit"  class="submitButton">' + '</div></div>';
        button.ShowBubblePopup({
            manageMouseEvents: false,
            position: 'bottom',
            align: 'left',
            tail: {
                align: 'left'
            },
            innerHtml: message,
            innerHtmlStyle: {
                color: '#000',
                'text-align': 'left'
            },
            themePath: 'http://www.maxvergelli.com/docs/jquery-bubble-popup-examples/images/jquerybubblepopup-themes',
            alwaysVisible: false,
            closingDelay: 200,
            selectable: true,
            afterShown: function() {
                active = false;
                $(".jquerybubblepopup").bind("mouseenter",function() {
                    active = true;
                }).bind("mouseleave", function() {
                    active = false; 
                });
            }
        });
    });
    $(window).bind('click',function() {
        resetActiveBubble();
    });
});
function resetActiveBubble() {
    if ( button && active == false ) {
        button.RemoveBubblePopup();
        button.CreateBubblePopup({
            manageMouseEvents: false
        });    
    }
}

The above code has a window click listener, and a boolean variable to determine whether the bubble is "active" or not (e.g mouse is sitting over the bubble).

This solution won't resolve for ipads etc (you'll need touch listeners), and when playing with jsfiddle, you can still close the bubble by clicking it during it's loading; the active state doesn't get attached until afterShown is fired.

I'm sure it can be optimised (also note the console.logs in the jsfiddle). I hope this helps.

Implementing click event for jquery bubble-popup

1 Answers1