遮罩层div - 爱码网

<html>
<head>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
 function ShowDialog() {
 $(\'#divGray\').css(\'height\', $(document).height());
 $(\'#divGray\').show();

 $(\'#divEdit\').css(\'top\', $(document).scrollTop() + 80);
 $(\'#divEdit\').css(\'left\', ($(document).width() - 500) / 2);
 $(\'#divEdit\').show();

 $(\'#divShadow\').css(\'top\', $(\'#divEdit\').offset().top + 5);
 $(\'#divShadow\').css(\'left\', $(\'#divEdit\').offset().left + 5);
 $(\'#divShadow\').css(\'width\', $(\'#divEdit\').width());
 $(\'#divShadow\').css(\'height\', $(\'#divEdit\').height());
 $(\'#divShadow\').show();
 }

 function CancelDialog() {
 $(\'#divGray\').hide();
 $(\'#divEdit\').hide();
 $(\'#divEdit input:text\').val(\'\');
 $(\'#divShadow\').hide();
 }
</script>
<style type="text/css">
#divEdit {
 position: absolute;
 z-index: 10003;
 width: 480px;
 border-top: #709cd2 1px solid;
 border-left: #709cd2 1px solid;
 border-right: #709cd2 1px solid;
 border-bottom: #709cd2 1px solid;
 display: none;
}
#divGray {
 position: absolute;
 z-index: 10001;
 left: 0px;
 top: 0px;
 width: 100%;
 background-color: #EEEFFF;
 opacity: 0.6; /* Firefox, Safari(WebKit), Opera)
 filter: "alpha(opacity=60)"; /* IE 8 */
 filter: alpha(opacity=60); /* IE 4-7 */
 display: none;
}
#divShadow {
 position: absolute;
 z-index: 10002;
 background: #000EEE;
 opacity: 0.1; /* Firefox, Safari(WebKit), Opera)
 filter: "alpha(opacity=10)"; /* IE 8 */
 filter: alpha(opacity=10); /* IE 4-7 */
 display: none;
}
</style>
</head>
<body>
<input type="button" style="height: 30px; width: 100px;" onClick="ShowDialog()" value="cover" />
 
 
 
<input type="button" value="test" />

<div id="divEdit">
 abcd
 
 <input type="button" value="cancel" onClick="CancelDialog()"/>
</div>
<div id="divGray"></div><div id="divShadow"></div>
</body>
</html>