title: How would I reference a dynamically created jQuery dialog box so I can close it programatically?
body: <p>When I began using jQuery a little over a year ago, I needed to load remote content into a pop-up dialog box. After scouring the internet and trying out several suggested methods for doing this, I came upon a function that worked exactly as I needed it to. However, one problem I've never solved is how to reference the dynamic dialog box so it can be closed from an outside function.</p>
  
  <p>Here's the function that creates the dialog box, appends it to the body, and then loads a page into it: </p>
  
  <pre><code>function openDynamicDialog() {
    var url = 'mypage.cfm';
    var dialog = $('`&lt;div style="display:hidden"&gt;&lt;/div&gt;`').appendTo('body');
      $(dialog).dialog({
        autoOpen: true,
        title: 'My Title',
        resizable: true,
        modal: true,
        width: 250,
        height: 100,
        close: function(ev, ui) {
               $(this).remove(); // ensures any form variables are reset.
             }, 
        buttons: {
          "Close": function(){ 
            $(this).dialog("close");
          }
        }
    });
    // load remote content
    dialog.load(
      url,
      {},
      function (responseText, textStatus, XMLHttpRequest) {
        dialog.dialog();
       }
    );
    //prevent the browser from following the link
    return false; };
  </code></pre>
  
  <p>I've considered giving that hidden div a hard-coded id value, but I'm not sure if there are drawbacks to that approach.</p>
  
  <p>Any suggestions would be most appreciated.</p>