js实现遮布效果

最新推荐文章于 2021-08-05 14:22:45 发布

原创最新推荐文章于 2021-08-05 14:22:45 发布 · 315 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml #javascript #ViewUI

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文提供了一个用于在开发过程中实现提示对话框和页面跳转的通用方法，包括遮罩层和新弹出层的创建与关闭，适用于多种场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发过程常遇到在导入数据或者需要页面跳转的时，希望有一个提示效果。用的地方多了，就整理了一个，或许你也需要哦

var m = "mask";
var _id = "pop";

//给提示对话框设置大小
var	newDivHeight = 20;
	
function show(info) {
	openMaskDiv();
	openNewDiv(info);
}
	
//判断div是否已经创建
var docEle = function() {
   return document.getElementById(arguments[0]) || false;
 }
 
 //mask遮罩层             
function openMaskDiv() { 
  if (docEle(m)) 
     document.body.removeChild(docEle(m));
  var newMask = document.createElement("div");
  newMask.id = m;
  newMask.style.position = "absolute";
  newMask.style.zIndex = "1";
  //遮罩层的宽度和高度
	var _scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
  newMask.style.width = "100%";
  newMask.style.height = _scrollHeight + "px";
  newMask.style.top = "0px";
  newMask.style.left = "0px";
  newMask.style.background = "#AAAAAA";
  newMask.style.filter = "alpha(opacity=60)";
  newMask.style.opacity = "0.30";
  document.body.appendChild(newMask);
}  
          
//新弹出层
function openNewDiv(info) {
	if (docEle(_id)) 
	   document.body.removeChild(docEle(_id));
	var newDiv = document.createElement("div");
	newDiv.id = _id;
	newDiv.style.position = "absolute";
	newDiv.style.zIndex = "9999";
	newDiv.style.width = "auto";
	newDiv.style.height = newDivHeight + "px";
	newDiv.style.top = "50%";
        newDiv.style.left = "45%";
        newDiv.style.textAlign = "center";
	newDiv.style.background = "#EFEFEF";
	newDiv.style.border = "1px solid #AAA";
	newDiv.style.padding = "5px";
	newDiv.innerHTML = "<img src='images/loading.gif'/>&nbsp;"+info;
	document.body.appendChild(newDiv);
	
	//页面手动关闭
	//close();
	//可设置10秒后关闭提示
  setTimeout(auto_close,10000);
}

//关闭新图层和mask遮罩层
function close() {
   var newA = document.createElement("a");
	 newA.href = "#";
	 newA.innerHTML = "close";
	 newA.onclick = function() {
		    document.body.removeChild(docEle(_id));
		    document.body.removeChild(docEle(m));
		    return false;
	 }				
   newDiv.appendChild(newA);
}

function auto_close() {
	document.body.removeChild(docEle(_id));
	document.body.removeChild(docEle(m));
	return false;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="mask.js"  charset="utf-8"></script> 
</head>
<body>
    <input type="button" onclick="show('正在同步...');" value="pop"></button></br>
    this is test page;</br>
    this is test page;</br>
    this is test page;</br>
    this is test page;</br>
    this is test page;</br>
    this is test page;</br>
    this is test page;</br>
    this is test page;</br>
    </body>
</html>