title: z-index on jquery dialog not working inside an iframe
body: <p>I'm using bootstrap, which uses jquery dialog. If the z-index of the dialog is set to 1 or more works fine in the stand alone script. However, when I call the same script inside an iframe. Then the dialog shows underneath the other elements on the same page. Bizarrely enough, if I try to close the dialog, I can't because it seems that the semi-transparent layer is on top of the dialog itself.</p>
  
  <pre><code>ui-dialog {
      z-index:99999999 !important;
  }
  .ui-widget-overlay {
      position: fixed;
      z-index:99999999 !important;
  }
  .ui-dialog {
      z-index:99999999 !important;
  }
  .fixed-dialog {
      position: fixed;
      top: 50px;
      left: 50px;
      z-index:99999999 !important;
  }
  .ui-dialog-titlebar {
      border-left: 30px solid transparent;
      min-height:40px;
      background-color:#f09;
      background-image:url(images/yellow_alert_icon.png);
      background-position: -22px 8px;
      background-repeat:no-repeat;
      z-index:99999999 !important;
  }
  </code></pre>
  
  <p>I'm very stocked !!!</p>
  
  <p>UPDATED CLARIFICATION:
  The iframe is empty. It doesn't contain any other elements. I just use it as a dialog.
  So the entire code inside the iframe is the same script. therefore, the parent script.
  the parent script isolated works fine.
  the moment I put it inside the iframe, when the jquery dialog pops up, it's showing underneath the parent script.</p>