-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8" />
-
<title>弹出层效果</title>
-
<link rel="stylesheet" type="text/css" href="css/1.css"/>
-
-
<!--<script type="text/javascript"src="js/jquery.color.js"></script>-->
-
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
-
<script type="text/javascript" src="js/1.js"></script>
-
-
</head>
-
<body>
-
<button> Click Me</button>
-
<div id="fugai">
-
<div id="hei"></div>
-
</div>
-
</body>
-
</html>
-
window.onload = function(){
-
-
$("button").click(function(){
-
$("#fugai").show();
-
$("#hei").show();
-
})
-
-
$("#fugai").click(function(){
-
$("#fugai").hide();
-
$("#hei").hide();
-
})
-
-
-
-
}
-
*{
-
margin:0;
-
padding: 0;
-
font-family: "微软雅黑";
-
}
-
#hei{
-
width: 500px;
-
height: 500px;
-
background: white;
-
position: absolute;
-
left: 600px;
-
top: 200px;
-
z-index: 1002px;
-
display:none;
-
-
-
}
-
#fugai{
-
display: none;
-
position: absolute;
-
top: 0%;
-
left: 0%;
-
width: 100%;
-
height: 100%;
-
background-color: black;
-
z-index: 1001;
-
-moz-opacity: 0.8;
-
opacity: 0.50;
-
filter: alpha(opacity=80);
-
}
点击 ClickMe 出现 点击fugai以内的地方消失进行循环
阅读(661) | 评论(0) | 转发(0) |
