title: How to put a div overlay over framesets?
body: <p>I have a requirement to create a please wait page using jQuery 1.6.2 for an existing jsp page.  I was able to get the div overlay to work, along with an please wait animation in a modal window in the center of the page.  However, the overlay only covers one of the framesets, the center one.  </p>
  
  <p>The html structure is basically (I'm leaving a lot out for clarity):</p>
  
  <pre><code>...
  &lt;frameset &gt;
    &lt;frame id="topMostFrame"&gt;
    &lt;frameset&gt;
      &lt;frame id="leftMostframe"&gt;
      &lt;frame id="centerMostFrame"&gt;
    &lt;/frameset&gt;
  &lt;/frameset&gt;
  &lt;noframes&gt;
  &lt;/noframes&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>function getTheOverlay(){
      $(document).ready(function() {
          $("#loading-div-background").css({opacity: 0.5});
          $("#loading-div-background").show();
          //alert("In getOverlay!");
      }); 
  }
  
  function remove(){
      $(document).ready(function() {
          $('#loading-div-background').hide();
      });
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="loading-div-background" style="display:none" class="ui-widget"&gt;
      &lt;div id="loading-div" class="ui-corner-all"&gt;
        &lt;img style="height:80px;margin:50px;" src="/images/loading.gif" alt="Loading.."/&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#loading-div-background {
      display:none;
      position:absolute;
      top:0;
      left:0;
      background:gray;
      width:100%;
      height:100%;
      /* Next 2 lines IE8 */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  }
  
  #loading-div {
    width: 300px;
    height: 200px;
    background-color: #ffffff;
    text-align:center;
    position:absolute;
    left: 50%;
    top: 50%;
    margin-left:-150px;
    margin-top: -100px;
  }
  </code></pre>
  
  <p>I tried moving the html to load in my jquery function, but it didn't display the overlay in IE8.  I also had a time getting IE8 to work with the overlay itself, but that is fixed using the CSS above.</p>
  
  <p>I need to disable the links on the left frame, which is probably the approach I'll use or else cover them with the overlay.  Yes I know frames are bad, but that is what I was given to work with.</p>
  
  <p>I can't get the overlay to go over the other framesets and cover the entire page.  I've read that this is impossible to do with framesets, although I'm guessing there could be a workaround.  However, when I use an alert for debugging purposes, the overlay covers over the entire page.  </p>
  
  <p>My question is: why is using an alert making the overlay cover everything?  Is there something else I could do to get the same effect, even with the framesets?</p>