<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>弹窗 遮罩.html</title>
<style>
*{margin:0;padding:0}
body{height:2000px;}
h3{font-size:18px;}<!--注意设置弹窗框Z-index:9999,才能显示在遮罩层上面-->
.login{330px;height:226px;border:1px solid #ccc;position:fixed;top:50%;left:50%;margin:-113px 0 0 -165px;display:none;z-index:9999;background:#fff;}
.header{height:30px;border-bottom:2px solid #ccc;position:relative;}
.header h3{line-height:30px;margin-left:10px;}
.header span{color:#333;position:absolute;top:0;right:0;cursor:pointer;}
.body{height:196px;}
.body p{text-align:center;margin:10px 0 0 10px; }
.body h3{margin:25px 0 15px 80px;}
.login input{135px;height:20px;background:#fff;border:1px solid #ccc;padding-left:4px;}
.body span{display:inline-block;64px;heiht:20px;text-align:right;}
.body .btn2{50px;background:#f60;color:#fff;border:none;cursor:pointer;}
<!--遮罩层的css写法：-->.cover{position:fixed;top:0;left:0;100%;height:100%;background-color:rgba(0,0,0,0.2);display:none;}
</style>
<script src="jquery-1.7.2.js"></script>
<script>
//第一种方法采用固定定位，登录框始终在窗口中间位置。
$(function(){
$(".btn1").click(function(){
$(".login").css("display","block");
$(".cover").css("display","block");
});
$(".close").click(function(){
$(".login").css("display","none");
$(".cover").css("display","none");
});
});
</script>
</head>
<body>
<button class="btn1">点击弹窗</button>
<div class="login">
<div class="header">
<h3>用户登录窗口</h3>
<span class="close">X</span>
</div>
<div class="body">
<h3>购物之前必须先登录</h3>
<p><label for="username"><span>用户名：</span></label><input type="text" name="username" id="username"></p>
<p><label for="password"><span>密 码：</span></label><input type="password" name="password" id="password"></p>
<p><button class="btn2">登录</button></p>
</div>
</div>
<div class="cover"></div><!--添加遮罩层-->
</body>
</html>