title: jquery ui dialog will not "close"
body: <p>I have a jquery dialog that I want to make JIT (Just in Time) this, to me, is by far the most elegant way of working, but I have spent about 2 days solid on this error and I cannot for the life of me figure it out.</p>
  
  <p>I know it should work because the X click in the corner works beautifully</p>
  
  <p>So. Can you a) help me fix this or b) tell me how to bind the Cancel button to the click event of the X (I have used this trick before when there has been such issues, but there is no id on this control that I can find, and now obvious way (that I know how to find) to browse the hierarchy using parents().</p>
  
  <pre><code> $(function() {
       var popUrl = 'pop.php?jscriptpopup=true';
       $("#button").click( function () { 
           JQueryDialog(popUrl); 
           return false;
       });        
   });
  
  var dialog;  //&lt;--added in desperation
  
  function JQueryDialog(url){
  
      $("#dialog").remove();
  
      $("body").append("&lt;div id='dialog'&gt;&lt;/div&gt;"); 
  
      dialog = $("#dialog").dialog({
          resizable: false,
          draggable: false,
          width: 770,
          height: 470,
          context: that,
          modal: true,
          autoOpen: false,
          buttons: {
              "Cancel" : function (){
                  $(dialog).("close");    //&lt;--this will not work
                                      //$(this).dialog("close"); &lt;&lt;-- hopeless
                                      //$("#dialog").dialog("close"); &lt;&lt;-- hopeless
                                      //$("#dialog").remove(); &lt;&lt;-- hopeless
              }
          }
      });     
  
      $.get(url, function(data) {
          $("#dialog").html(data);
          $("#dialog").dialog('open');        
      });     
  }
  </code></pre>