multiple jquery inline modal popups

Question

I am using bPopup to launch an inline popup. http://dinbror.dk/blog/bPopup/

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 bPopup is very inefficient, and I couldn't find another plugin that allowed for many different inline popups on the same page.

Here is the code:

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>

It is not efficient because I need to create a different event for each button, a new ID for each button, and a new ID for each popup.

I was reading about using .on() instead of bind. But I am not sure where to go from there.

Answer 1

I would recommend using the dialog method of the jQuery UI. http://jqueryui.com/dialog/ With this you can hide all the elements you want to pop-up in div's in your page with css display:none; give them all the same class and then you can attach a single listener like this.

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