title: multiple jquery inline modal popups
body: <p>I am using <code>bPopup</code> to launch an inline popup. <a href="http://dinbror.dk/blog/bPopup/" rel="nofollow">http://dinbror.dk/blog/bPopup/</a></p>
  
  <p>I have a page that I need to be able to launch many different inline popups depending on which link is clicked. But I think the default code for <code>bPopup</code> is very inefficient, and I couldn't find another plugin that allowed for many different inline popups on the same page. </p>
  
  <p>Here is the code:</p>
  
  <p><strong>JavaScript:</strong> </p>
  
  <pre><code>// 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);
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div  id="my-button"&gt;
          &lt;div id="element_to_pop_up"&gt;Content of popup&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="my-button2"&gt;
      &lt;div id="element_to_pop_up2"&gt;Content of popup2&lt;/div&gt;        
  &lt;/div&gt;
  </code></pre>
  
  <p>It is not efficient because I need to create a different event for each button, a new ID for each button, and a new <code>ID</code> for each popup. </p>
  
  <p>I was reading about using <code>.on()</code> instead of bind. But I am not sure where to go from there. </p>