可全屏遮罩和对指定元素遮罩的jQuery数据加载遮罩层

一款可全屏遮罩和对指定元素遮罩的jQuery数据加载遮罩层，通过点击页面的两个按钮“数据加载-全屏”和“数据加载-指定元素”，可以看到不同的数据加载遮罩层效果，遮罩层的区域可以自由设定。

分类：悬浮层/弹出层 > 弹出层难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入加载样式文件、jQuery库和加载插件，并设置好页面按钮和遮罩层的样式，代码如下：

<link type="text/css" rel="stylesheet" href="css/load.css"  media="all">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/load-min.js" charset="utf-8"></script>
<style type="text/css">
button{
	outline: none;
	padding: 5px 15px;
	border: 1px solid #eee;
	background-color: #FFFFFF;
	border-radius: 5px;
	font-size: 12px;
}
button:hover{
	cursor: pointer;
}

#test_mask{
	width: 800px;
	height: 300px;
	border: 1px solid #BCE8F1;
}
</style>

页面的body部分，设置好两个触发按钮和遮罩层的div容器，代码如下：

<button onclick="mask_fullscreen()">数据加载-全屏</button>
<button onclick="mask_element()">数据加载-指定元素</button>
<div id = "test_mask" class="mask"></div>

页面的底部，需设置好两种加载层的相应参数，代码如下：

//加载层-全屏
function mask_fullscreen(){
	$.mask_fullscreen(1000);
	
}
//加载层-指定元素
function mask_element(){
	$.mask_element('#test_mask', 5000);
}