Displays a loader image with opacity on the page. Laod does not work in IE 9 and earlier.

Question

I want the image downloader image on the page load I use it with opacity and at the same time background links are not clickable. Below code works fine in FF, Chrome, But it has some problems with IE browser -When the opacity loader image is displayed at the same time, background links can be clicked. I do not want these links to be visible when displaying the bootloader image.

<script> $(document).ready(function() { }); function displayLoader() { alert('hello'); $('#load').html('<img src="../images/icn/loader.gif"/>'); $("#load").css("width", "100%").css("height", "100%"); $("#load").addClass("load"); $("#divPage").addClass("loaderStyle"); } </script> <div id="divPage" style="background:#F2F2F2;height:500px;"> <a onclick="displayLoader();" href="#">click me</a> <div id="load"></div> </div> and **CSS** .loaderStyle { opacity: 0.80; filter: alpha(opacity=80); } #load { position: absolute; /*margin: -25px 0 0 -25px;*/ z-index: 1000; } 

Answer 1

try adding background color and please don't forget to pass other answers

 #load { /* position: absolute; z-index: 1000;*/ position: absolute; background:#333; left:0; top:0; z-index: 1000; } 

Answer 2

You can do it:

 $("#load").css({ "width":"100%", "height":"100%", "opacity":"0.8" }); 

That should do the trick.

Answer 3

Actually, for IE8 and earlier support this should do the trick

 $("#load").css({ "width":"100%", "height":"100%", "opacity":"0.8", "filter":"alpha(opacity=80)" }); 

Answer 4

You are viewing this link, you can find your problem in this link

http://www.w3schools.com/css/css_image_transparency.asp

and use this code to optimize your code

 $("#load").css({"width":"100%","height":"100%"}) /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5; /* Good browsers */ opacity: 0.5;