여러 jquery 인라인 모달 팝업

Question

bPopup을 사용하여 인라인 팝업을 시작합니다. http://dinbror.dk/blog/bPopup/

어떤 링크를 클릭했는지에 따라 여러 가지 인라인 팝업을 시작할 수 있어야하는 페이지가 있습니다. 하지만 bPopup의 기본 코드는 매우 비효율적이며 같은 페이지에서 여러 가지 인라인 팝업을 허용하는 다른 플러그인을 찾을 수 없습니다.

자바 스크립트 : 여기

코드입니다

// Semicolon (;) to ensure closing of earlier scripting 
    // Encapsulation 
    // $ is assigned to jQuery 
    ;(function($) { 

     // DOM Ready 
     $(function() { 

      // Binding a click event 
      // From jQuery v.1.7.0 use .on() instead of .bind() 
      $('#my-button').bind('click', function(e) { 

       // Prevents the default action to be triggered. 
       e.preventDefault(); 

       // Triggering bPopup when click event is fired 
       $('#element_to_pop_up').bPopup(); 

      }); 

         // Binding a click event 
      // From jQuery v.1.7.0 use .on() instead of .bind() 
      $('#my-button2').bind('click', function(e) { 

       // Prevents the default action to be triggered. 
       e.preventDefault(); 

       // Triggering bPopup when click event is fired 
       $('#element_to_pop_up2').bPopup(); 

      }); 

})(jQuery); 

HTML : I 각 버튼에 대해 다른 이벤트를 만들 필요가 있기 때문에 그것은 효율적이지 않습니다

<div id="my-button"> 
     <div id="element_to_pop_up">Content of popup</div> 
</div> 

<div id="my-button2"> 
    <div id="element_to_pop_up2">Content of popup2</div>   
</div> 

, 각 버튼에 대한 새로운 ID 및 각 팝업에 대한 새로운 ID.

바인드 대신 .on()을 사용하는 것에 대해 읽었습니다. 그러나 나는 거기에서 어디로 가야할지 모르겠습니다.

Answer 1

jQuery UI의 대화 방법을 사용하는 것이 좋습니다. http://jqueryui.com/dialog/ div로 페이지의 div에 팝업으로 표시하려는 모든 요소를 ​​숨길 수 있습니다. display:none; 동일한 클래스를 모두 제공 한 다음 이와 같은 단일 수신기를 연결할 수 있습니다.

HTML

<div class="button"> 
     <div class="popup">Content of popup</div> 
</div> 

<div class="button"> 
    <div class="popup">Content of popup2</div>   
</div> 

자바 스크립트

$('button').on('click', function(event){ 
    // Select the div with class popup, within the clicked element. 
    $('.popup', $(event.target)).dialog("open"); 
    // Potentially you might need to unhide the div through css like this 
    // $('.popup', $(event.target)).css('display', 'block'); 
}