background fadeout not occupying full in IE
I am using the following code to fade out background while showing a popup. This is the div container
Css for the same
#VbackgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
top:0;
left:0;
background:#000000;
border:1开发者_运维问答px solid #cecece;
z-index:1;
}
When some clicks a div i am showing a popup and greying out background by using the
function GreyoutBackground() {
$("#VbackgroundPopup").css({
"background-color": "#000000",
"filter": "alpha (opacity=70)",
"filter": "progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=70)",
"-moz-opacity": "0.7",
"opacity": "0.7",
"-khtml-opacity": ".7",
"zoom": "1"
});
$("#VbackgroundPopup").css({ "opacity": "0.6" });
$("#VbackgroundPopup").show();
}
The above code is working fine in Firefox , but in internet explorer its not working , can someone please tell me what is the issue. i tried width 100% and height 100% , that also didn't workout
This works fine (tested in IE6 too):
<!DOCTYPE html>
<html>
<head>
<title>Fade</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<button>Fade in the overlay</button>
<div id="overlay"></div>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#overlay {
background-color: #000000;
display:none;
height:100%;
top: 0;
left: 0;
position: fixed;
_position: absolute;
width: 100%;
z-index: 999;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function($){
$('button').click(function(){
$('#overlay').fadeTo('slow', 0.5);
});
});
</script>
</body>
</html>
I prefered using fadeTo than css('opacity') because the transition is animated.
加载中,请稍侯......
精彩评论