<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="D:\Project\HtmlDemo\script\jquery-1.11.0.min.js"></script>
<link href="D:\Project\HtmlDemo\script\MaskUtils.css" rel="stylesheet" />
</head>
<body>
<input type="button" onclick="opens()" name="name" value="打开遮罩层" />
</body>
</html>
<script>
function opens() {
var searchLoading = MaskUtils();
//打开自定义遮罩层
searchLoading.mask();
//关闭自定义遮罩层
//setTimeout(function () { searchLoading.unmask() }, 10000)
}
function MaskUtils() {
var $mask, $maskMsg;
var defMsg = '请稍等...';
function init() {
if (!$mask) {
$mask = $("<div style=\"width:100%;display:none;text-align:center;position:absolute;top:0px;height:100%;font-size: 12px;z-index:1000000000;background: #ffffff7a;\"><div style=\"position:relative;top:45%;width:100%;\"> <div class=\"loadingSearch\" ><div></div><div></div><div></div><div></div></div></div></div>").appendTo("body");
}
if (!$maskMsg) {
$maskMsg = $("<div class=\"datagrid-mask-msg\" style=\"z-index:100001;position: absolute;text-align:center\">" + defMsg + "</div>")
.appendTo("body").css({ 'font-size': '12px' });
}
$mask.css({ width: "100%", height: "100%" });
$maskMsg.css({
width: "100%",
top: "50%"
});
}
return {
mask: function (msg) {
init();
$mask.show();
$maskMsg.html(msg || defMsg).show();
},
unmask: function () {
if ($mask) {
$mask.hide();
$maskMsg.hide();
}
}
}
}
</script>
css内容
.loadingSearch {
position: absolute;
z-index: 9997;
width: 60px;
height: 54px;
left: calc(50% - 30px);
top: calc(50% - 27px);
text-align: center;
overflow: hidden;
}
/*当有loading文字时在图标外再包裹一层*/
.sx-loading__wrapper-large {
position: absolute;
width: 200px;
height: 86px;
left: calc(50% - 100px);
top: calc(50% - 43px);
}
.loadingSearch div {
position: absolute;
bottom: 0;
width: 10px;
height: 54px;
border-radius: 3px;
}
.loadingSearch div:nth-child(1) {
left: 0;
background-color: #ED4D4D;
animation: line-grow 0.5s 0s ease alternate infinite;
}
.loadingSearch div:nth-child(2) {
left: 15px;
background-color: #FFD75B;
animation: line-grow 0.5s 0.15s ease alternate infinite;
}
.loadingSearch div:nth-child(3) {
left: 30px;
background-color: #2CBEF1;
animation: line-grow 0.5s 0.3s ease alternate infinite;
}
.loadingSearch div:nth-child(4) {
left: 45px;
background-color: #2DF07B;
animation: line-grow 0.5s 0.4s ease alternate infinite;
}
@-webkit-keyframes line-grow {
0% {
transform: translateY(54px);
}
100% {
transform: translateY(0px);
}
}
@keyframes line-grow {
0% {
transform: translateY(54px);
}
100% {
transform: translateY(0px);
}
}