Несколько jQuery встроенных модальных всплывающих окон

Question

Я использую bPopup, чтобы запустить встроенное всплывающее окно. http://dinbror.dk/blog/bPopup/

У меня есть страница, в которой мне нужно запустить много разных встроенных всплывающих окон, в зависимости от того, какая ссылка нажата. Но я думаю, что код по умолчанию для bPopup очень неэффективен, и я не смог найти другой плагин, который допускал бы множество разных встроенных всплывающих окон на одной странице.

Вот код:

JavaScript:

// 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:

<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 для каждого всплывающего окна.

Я читал об использовании .on() вместо привязки. Но я не уверен, куда идти оттуда.

Answer 1

Я бы рекомендовал использовать диалоговый метод пользовательского интерфейса jQuery. http://jqueryui.com/dialog/ С этим вы можете скрыть все элементы, которые вы хотите всплывать в div на вашей странице, css 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> 

Javascript

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