title: Display jquery dialog in parent window
body: <p>I have a website, that uses an iframe. The iframe itself is the content of the website. Now in the iframe I would like to use the jQuery Dialog. However when using it, the overlay and dialog is only displayed inside the iframe not on the parent. My parent html has the following html defined for the dialog:</p>
  
  <pre><code>&lt;div id="modalHolder"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>In my iframe I am using the following javascript to create the dialog and to show it. </p>
  
  <pre><code>dlg1 = $(window.parent.document.getElementById("modalHolder"));
  dlg1 = dlg1.dialog({
      width: 300,
      height: 150,
      modal: true,
      autoOpen: false,
      resizable: false,
      closeOnEscape: false,
      draggable: false,
      overlay: 
      {
          backgroundColor: 'red',
          opacity: 0.65
      },
      open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
  });
  </code></pre>
  
  <p>To show the dialog I use this:</p>
  
  <pre><code>dlg1.dialog('open');
  </code></pre>