Multiple jQuery UI dialogs in a dynamic page

June 21, 2011 | 2 comments

Recently I was doing the front-end dev for a dynamically generated page that needed to have a large number of popups. I found the following script to help me enable the dialogs in a way that would be easy to integrate with dynamically generated code.

The original script

My version:

$(function() {
    var options = {
		autoOpen: false,
		resizable: false,
		width: 462,
		height: 373,
		open: function() {
    		$(this).dialog("widget").find(".ui-dialog-titlebar").hide();
		}
    };
    var n = 1;
    $(".popup").each(function(i) {
        var dlg = $('#popup-' + n).dialog(options);
        $('.opener-' + n).click(function() {
            dlg.dialog("open");
            return false;
        });
        $('#closer-' + n).click(function() {
            dlg.dialog("close");
            return false;
        });
        n++;
    });
});

 


What I changed:

  • In the options I added a function on open to remove the title bar.
  • I used the a class on the dialog div instead of the opener link to run the each loop, because there would be multiple opener links for each dialog.
  • I added a close function on a closer button.

2 Responses to “Multiple jQuery UI dialogs in a dynamic page”

Leave a Reply