弹窗遮罩

最新推荐文章于 2025-06-17 13:41:05 发布

weixin_30920853

最新推荐文章于 2025-06-17 13:41:05 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/annie211/p/6007578.html

本文介绍了一种使用HTML和CSS结合jQuery实现弹窗及遮罩层的方法。通过固定定位确保登录框始终位于屏幕中央，并利用遮罩层提升用户体验。文章提供了完整的代码示例。

<!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;}
.login{width: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{width:135px;height:20px;background:#fff;border:1px solid #ccc;padding-left:4px;}
.body span{display:inline-block;width:64px;heiht:20px;text-align:right;}
.body .btn2{width:50px;background:#f60;color:#fff;border:none;cursor:pointer;}
.cover{position:fixed;top:0;left:0;width: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>