jquery bubble-popup에 대한 click 이벤트 구현

Question

내 사이트에서 jquery-bubble-popup을 구현하려고하지만 완전히 멈췄습니다. 나는 다음을 시도하고있다.

1. 누군가가 "보고서 정보"div를 클릭하면 해당 보고서와 관련된 풍선 팝업이 표시됩니다.
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이 시작될 때까지 활성 상태가 연결되지 않습니다.

최적화 할 수 있다고 확신합니다 (또한 jsfiddle의 console.log에 유의하십시오). 이게 도움이 되길 바란다.