弹出div遮罩层

2019独角兽企业重金招聘Python工程师标准>>>

一个弹出的遮罩层，在原有基础上稍作改动

js:

var timeKeep;
function submitOrder() {
    timeKeep = setTimeout("insert()", 1000);
}


function insert() {
    var div = document.createElement("div");
    div.className = "dis";
    div.style.width = document.documentElement.scrollWidth;
    div.style.height = document.documentElement.scrollHeight;
    document.getElementsByTagName("body")[0].appendChild(div);
    var div1 = document.createElement("<div class='dis1'>");
    document.getElementsByTagName("body")[0].appendChild(div1);
    var insert = "<img class='loading' src='${themePath}/images/loading.gif' alt=''/>";
    div1.innerHTML = insert;
}
function removeDiv() {
    $(".dis").remove();
    $(".dis1").remove();
} 

css:

.dis {
	background: #cccccc;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	- moz - opacity: 0.5;
	filter: alpha(opacity = 50);
	z - index: 98;
}
.dis1 {
	width: auto;
	height: auto;
	left: 50 % ;
	top: 40 % ;
	position: absolute;
	margin - left: -50px;
	margin - top: -25px;
	z - index: 99;
	text - align: center;
	border: 0px solid#666666;
}

调用方式:

// 显示遮罩层
submitOrder();
// 加载时间在1秒之内的，取消遮罩层
clearTimeout(timeKeep);
 // 取消遮罩层
 removeDiv(); 

图片：

转载于:https://my.oschina.net/wuyizhong/blog/122100