jQuery Forum

Hi all

I have a link which when clicked either fades up a full screen overlay and a popup box ontop or fades them both down.  This works perfect in every browser except IE7 and IE8.  The popup box fades in and out OK but the overlay just appears or disappears with no fading (which is bizarre!).

My JS code is as follows:

1.     // functionlity for the signout link
       $('#signout').click(function(e) {
           $('#overlay').fadeTo('slow', 0.8, function() {
               $('#popup').fadeTo('slow', 1);
           });
           e.preventDefault();
       });   
      
       // functionlity to close the popup window
       $('#closebtn').click(function(e) {
           $('#popup').fadeTo('slow', 0, function() {
               // Once complete, hide the elements from the DOM
               $('#overlay').fadeTo('slow', 0, function() {
                   $('#overlay').hide();
                   $('#popup').hide();
               });
           });
           e.preventDefault();
       });   
   

My CSS on the elements is as follows:

1. div#overlay {
       width:100%;
       height: 100%;
       background:#000;
       position: fixed;
       top:0;
       left:0;
       z-index: 39999;
       opacity:.80;
       filter:alpha(opacity=80);
       filter: "alpha(opacity=80)";
   }
   
   div#popup {
       position: fixed;
       top:15%;left:25%;
       width:50%; height:350px;
       background: #94C545;
       border: 10px solid #fff;
       z-index: 49999;
   }
   
   

Any thoughts as to why IE can fade the popup box but not the overlay??

Thanks for reading
Kris