title: jQuery UI Dialog with iFRAME
body: <p>I'm implementing a jquery UI dialog with iFrame. The dialog has an iFrame which has a file upload page.<br>
  Everything is fine, but closing the dialog from the iFrame page got problem.</p>
  
  <p>The below is my code:</p>
  
  <p><strong>Parent Page</strong></p>
  
  <pre><code>&lt;!-- Upload File Form --&gt;
  &lt;div id="dialog-upload" class="dialog" title="Upload File" style="display:none"&gt;
      &lt;div class="message error"&gt;&lt;/div&gt;
      &lt;iframe id="upload-form" src="file_upload.php" width="276" height="195" frameborder="0"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  &lt;!-- button to launch the dialog --&gt;    
  &lt;button id="btnUpload"&gt;Upload&lt;/button&gt;
  
  &lt;script type="text/javascript"&gt;
      function _finishUpload(){
          console.log($('#dialog-upload')); // the element was outputed in the console
          $('#dialog-upload').dialog( 'close' ); // the dialog is not closed.
          //$('#dialog-upload').hide() // this code was executed.
      }
  
      function _fileUpload(){         
          var doc = $('#upload-form')[0].contentWindow; // iframe document
          $('#dialog-upload').find('.message').html('').hide();
          var file = doc.$('form').find('#file').val();
          if( ! file ){
              $('#dialog-upload').find('.message').html('Please select a file.').show();
          }else{              
              doc.$('form').submit(); // submit the form in the iFrame dialog
          }           
      },      
  
      $(document).ready( function(){
          $( "#dialog-upload" ).dialog({
              modal: true,
              autoOpen: false,
              resizable: false,               
              buttons: {
                  OK: function() {
                      _fileUpload();
                  },
                  Cancel: function(){
                      $(this).dialog( "close" );
                  }
              }               
          });
  
          $( '#btnUpload' ).click(function(){
              $('#dialog-upload').dialog( 'open' ); 
          });     
      } );                    
  &lt;/script&gt; 
  </code></pre>
  
  <p><strong>IFRAME page</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
      &lt;div class="dialog" style="display:block"&gt;
          &lt;form name="frmFileUpload" method="post" enctype="multipart/form-data"&gt;
              &lt;fieldset&gt;
                  &lt;label for="txtTitle"&gt;Upload File&lt;/label&gt;                
                  &lt;input type="file" name="file" id="file" class="text ui-widget-content ui-corner-all" /&gt;
              &lt;/fieldset&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  &lt;?php if(sizeof($_POST)){ # trigger this only when the form is submitted ?&gt;
  &lt;script type="text/javascript"&gt;
      window.parent._finishUpload(); // it was executed, but the dialog is not closed
  &lt;/script&gt;   
  &lt;?php } ?&gt;  
  </code></pre>
  
  <p>I also tried this <code>window.parent.$('#dialog-upload').dialog('close');</code> in iFrame, but failed.</p>