Where to keep html for windows and pop-ups in jQuery app

I'm curious about what the recommended way to handle pop-ups and windows is in javascript/jquery. I know there are many ways, I'm more curious about which of the methods, if they're not equal, are superior overall, perhaps for reasons I haven't considered yet (things like speed, maintainability, etc.)

Right now I have a number of divs for the pop-ups at the bottom of my html page. They're hidden on page load, and then moved and shown by the开发者_高级运维 click functions that activate them.

I know many plugins will append the code to the page via javascript (i assume on load);

I am thinking of having a <div id="modal"> at the bottom and using the $.load function to place contents in it for modal windows.

Are there major ways that I'm missing?

I prefer to load the contents of the dialog in via AJAX - use a single at the bottom of the page like you suggest then load the contents....

$(document).ready(function(){
var dialogOpts = {
      modal: true,
      bgiframe: true,
      autoOpen: false,
      height: 500,
      width: 500,
      draggable: true,
      resizeable: true,
   };
$("#example").dialog(dialogOpts);   //end dialog

   $('#showdialog').click(
      function() {
         $("#example").load("test.html", [], function(){
               $("#example").dialog("open");
            } 
         );
         return false;
      }
   );

});