jQuery遮罩代码

来源：互联网发布：阿里健康云药师兼职编辑：程序博客网时间：2024/05/01 21:51

遮罩是很常用的前端涉及样式，jQuery写的遮罩代码如下：

一下代码分为html代码和css代码两个文件：

1.Html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery遮罩</title>

<link href="css/login.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="main"><a href="javascript:showBg();">点击这里查看效果</a>
<div id="fullbg"></div>
<div id="dialog">
<p class="close"><a href="#" onclick="closeBg();">关闭</a></p>
<div>弹出框内容如下...</div>
</div>
<script src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
//显示灰色 jQuery 遮罩层
function showBg() {
var bh = $("body").height();
var bw = $("body").width();
$("#fullbg").css({
height : bh,
width : bw,
display : "block"
});
$("#dialog").show(500);
}
//关闭灰色 jQuery 遮罩
function closeBg() {
$("#fullbg,#dialog").hide();
}
</script>
</body>
</html>

2.css代码：

/* jQuery遮罩css样式 */
/* Created by Alvin Xing */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
}

#main {
height: 1800px;
padding-top: 90px;
text-align: center;
}

#fullbg {
background-color: gray;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
z-index: 3;
filter: alpha(opacity = 50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}

#dialog {
background-color: #fff;
border: 5px solid rgba(0, 0, 0, 0.4);
height: 400px;
left: 50%;
margin: -200px 0 0 -200px;
padding: 1px;
position: fixed !important; /* 浮动对话框 */
position: absolute;
top: 50%;
width: 400px;
z-index: 5;
border-radius: 5px;
display: none;
}

#dialog p {
margin: 0 0 12px;
height: 24px;
line-height: 24px;
background: #CCCCCC;
}

#dialog p.close {
text-align: right;
padding-right: 10px;
}

#dialog p.close a {
color: #fff;
text-decoration: none;
}

代码完结！

注意：需要引入jQuery文件。此功能基于jQuery开发，所以请引入jQuery文件。

0 0