Реализация события клика для всплывающего окна jquery

Question

Я пытаюсь реализовать jquery-bubble-popup на моем сайте, но я полностью застрял. Я пытаюсь сделать следующее.

1. Если кто-то нажмет на "информацию отчета", появится всплывающее окно, относящееся к этому отчету.
2. Я хочу, чтобы во всплывающем окне можно было что-то изменить и нажать кнопку "Отправить", после чего эти данные будут опубликованы на этом сервере.
3. Если один клик за пределами всплывающего окна. Я хочу, чтобы это просто закрылось.

Довольно простая установка, но я дергаю себя за волосы. Нельзя заставить всплывающее окно закрываться без сбоев.

Скрипка: http://jsfiddle.net/rECnm/1/

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

Код:

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

Answer 1

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

Приведенный выше код имеет прослушиватель щелчков в окне и логическую переменную, чтобы определить, является ли пузырь "активным" или нет (например, мышь сидит над пузырем).

Это решение не подходит для ipads и т. Д. (Вам понадобятся сенсорные прослушиватели), и при игре с jsfiddle вы все равно можете закрыть пузырь, щелкая его во время загрузки; активное состояние не присоединяется, пока не будет запущен afterShown.

Я уверен, что это может быть оптимизировано (также обратите внимание на console.logs в jsfiddle). Надеюсь, это поможет.