Реализация события click для jquery bubble-popup

Question

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

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

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

Fiddle: 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). Надеюсь, это поможет.