Here is the code snippet I'm working with:
function toggleLoader( display ){
if( display === 'show' ){
$('.overlay, .loader').css({
'z-index' : '1000',
'display' : 'inline'
});
} else {
$('.overlay, .loader').css({
'display':'none'
});
}
}
Here is the corresponding 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;
}
And the relevant HTML code snippet:
<div class="overlay">
<div id="horizon">
<img src="../images/ajax-loader.gif" alt="Loading... Please wait." class="loader"/><br />
<p class="loader">Loading... Please wait a moment.</p>
</div>
</div>
It seems to work fine in FireFox, but I'm encountering display issues in IE7+, Chrome, and Safari. I suspect it may be due to my CSS implementation.
Would appreciate any help or suggestions. Thanks!