织梦号十年经验的全栈程序员！各种CMS快速仿站200起！模板修改！网站二次开发 ！小程序定制开发！戳我
网站开发中，经常会遇到 要使用 遮罩层的地方！ 今天就为大家分享一个简单的JQ遮罩层实现代码！
先看效果图：
简单的遮罩层源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JQ简单实现遮罩层</title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="style.css">
<style>
* {
margin: 0;
padding: 0
}
.tips {
width: 100%;
height: 100%;
background: #000;
top: 0;
filter: alpha(opacity=60);
position: fixed;
z-index: 998;
opacity: 0.6;
display: none
}
.text {
width: 200px;
height: 200px;
margin: 0 auto;
z-index: 999;
top: 30%;
position: relative;
background: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="">正常显示内容</div>
<p>正常显示内容2222</p>
<button onclick="show()">显示遮罩层</button>
<div class="tips">
<div class="text">
<p>JQ简单实现遮罩层</p>
<p>JQ简单实现遮罩层2</p>
<p>JQ简单实现遮罩层3</p>
<button onclick="hide()">关闭遮罩层</button>
</div>
</div>
<script type="text/javascript">
function hide() {
$('.tips').hide();
}
function show() {
$('.tips').show();
}
</script>
</body>
</html>
