<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; font-family:"微软雅黑"; color:#666;}
.nav{
width:700px;
height:350px;
background:#ccf;
border:12px solid #000;
border-radius:8px;
box-shadow: 0 0 50px #000;
z-index:2;
display:none;
position:absolute;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: 330px;
}
.btn{width:140px;height:34px;display:block;
margin:80px auto;text-align:center;line-height:32px;text-decoration:none;color:#fff;border-radius:20px;font-size:14px;border:1px solid #39B2E2;color:#39B2E2;}
.btn:hover{background:#39B2E2; color:#FFF;}
.yy{width:100%; height:100%; background:#000; position:absolute; left:0;top:0; z-index:1; display:none; }
</style>
<link href="css/animate.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<a href="#" class="btn">给我弹出来</a>
<div class="nav"></div>
<div class="yy"></div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js">
</script>
<script type="text/javascript">
$(function(){
$(".btn").click(function(){
$(".nav").addClass("animated bounceInDown").show();
$(".yy").css("opacity","0.3").show();
});
$(".yy").click(function(){
$(".yy").hide();
$(".nav").addClass("animated bounceOutUp").show();
});
});
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; font-family:"微软雅黑"; color:#666;}
.nav{
width:700px;
height:350px;
background:#ccf;
border:12px solid #000;
border-radius:8px;
box-shadow: 0 0 50px #000;
z-index:2;
display:none;
position:absolute;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: 330px;
}
.btn{width:140px;height:34px;display:block;
margin:80px auto;text-align:center;line-height:32px;text-decoration:none;color:#fff;border-radius:20px;font-size:14px;border:1px solid #39B2E2;color:#39B2E2;}
.btn:hover{background:#39B2E2; color:#FFF;}
.yy{width:100%; height:100%; background:#000; position:absolute; left:0;top:0; z-index:1; display:none; }
</style>
<link href="css/animate.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<a href="#" class="btn">给我弹出来</a>
<div class="nav"></div>
<div class="yy"></div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js">
</script>
<script type="text/javascript">
$(function(){
$(".btn").click(function(){
$(".nav").addClass("animated bounceInDown").show();
$(".yy").css("opacity","0.3").show();
});
$(".yy").click(function(){
$(".yy").hide();
$(".nav").addClass("animated bounceOutUp").show();
});
});
</script>
</body>
</html>
1393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
