JQuery - Мой код не отображается для работы во всех браузерах

Question

У меня есть этот код:

function displayLoader(toggle){ 
    if(toggle === 'show'){ 
     $('.overlay, .loader').css({ 
      'z-index'  : '1000', 
      'display'  : 'inline' 
     }); 
    } else { 
     $('.overlay, .loader').css({ 
      'display':'none' 
     }); 
    } 
} 

и CSS для этого:

.overlay{ 
      clear: both; 
      width: 100%; 
      height:100%; 
      z-index:600; 
      position:absolute; 
      background: url('../images/overlay.jpg'); 
      background-repeat: repeat; 
      opacity:0.65; 
      filter:alpha(opacity=65); /* For IE8 and earlier */ 
      display:none; 
} 

.loader{ 
    z-index:1000; 
    position: absolute; 
    display: none; 
} 

И вот мой HTML код отношения:

<div class="overlay"> 
     <div id="horizon"> 
      <img src="../images/ajax-loader.gif" alt="Loading... Please wait." class="loader"/><br /> 
      <p class="loader">Loading... Please be patient.</p> 
     </div> 
</div> 

Это нормально работает, когда я вызываю displayLoader ('show'); (или скрыть), если я использую FireFox, но как только я пытаюсь использовать IE7 +, Chrome или Safari, он ничего не отображает.

Мои CSS очень плохие, как вы можете видеть.

Любая помощь по этому вопросу будет замечательной.

Спасибо!

Answer 1

Я сделал скрипку. Кажется, это работает отлично для меня в IE. Я что-то упускаю?

http://jsfiddle.net/3aLgY/4/