首页 > 代码库 > JQuery-遮罩层
JQuery-遮罩层
HTML
<html>
<head>
<link href="http://www.mamicode.com/StyleSheet.css" rel="stylesheet" type="text/css" />
<script src="http://www.mamicode.com/Jquery.js" type="text/javascript"></script>
<script src="http://www.mamicode.com/JavaScript.js" type="text/javascript"></script>
</head>
<title>Title</title>
<body>
<div id="bodydiv">
<input type="button" id="buttonshow" value="http://www.mamicode.com/显示" />
<div id="divpopup">
<input type="button" id="buttonclose" value="http://www.mamicode.com/关闭"/>
</div>
<div id="divcover">
</div>
</div>
</body>
</html>
JS(JavaScript.js)
$(function(){
$("#buttonshow").click(function(){
$("#divcover").css("height",$(document).height());
$("#divcover,#divpopup").show(1000).css("display","block");
$("#buttonshow").hide(1000);
$("#buttonclose").click(function(){
$("#divcover,#divpopup").hide(1000);
$("#buttonshow").show(1000);
});
});
});
CSS(StyleSheet.css)
#divpopup
{
display:none;
position:fixed;
z-index:1002;
}
#divcover
{
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: Gray;
position: absolute;
display: none;
z-index: 1001;
opacity:0.50;
}
JQuery-遮罩层