js遮罩层效果代码一例

来源:网络整理作者:wy 发布时间:2020-12-24 02:05

本文介绍下，js实现的遮罩层效果的例子，有需要的朋友，参考下吧。...

js遮罩层效果代码。

如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>mask遮罩层-</title> <style type="text/css"> #newDiv { } </style> </head> <body> <script type="text/javascript"> var docEle = function() { return document.getElementById(arguments[0]) || false; } function openNewDiv(_id) { var m = "mask"; if (docEle(_id)) document.body.removeChild(docEle(_id)); if (docEle(m)) document.body.removeChild(docEle(m)); //mask遮罩层 var newMask = document.createElement("div"); newMask.id = m; newMask.style.position = "absolute"; newMask.style.zIndex = "1"; _scrollWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth); _scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); newMask.style.width = _scrollWidth + "px"; newMask.style.height = _scrollHeight + "px"; newMask.style.top = "0px"; newMask.style.left = "0px"; newMask.style.background = "#33393C"; newMask.style.filter = "alpha(opacity=10)"; newMask.style.opacity = "0.20"; document.body.appendChild(newMask); //新弹出层 var newDiv = document.createElement("div"); newDiv.id = _id; newDiv.style.position = "absolute"; newDiv.style.zIndex = "9999"; newDivWidth = 400; newDivHeight = 200; newDiv.style.width = newDivWidth + "px"; newDiv.style.height = newDivHeight + "px"; newDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 - newDivHeight / 2) + "px"; newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 - newDivWidth / 2) + "px"; newDiv.style.background = "#EFEFEF"; newDiv.style.border = "1px solid #860001"; newDiv.style.padding = "5px"; newDiv.innerHTML = "弹出层内容 "; document.body.appendChild(newDiv); //弹出层滚动居中 function newDivCenter() { newDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 - newDivHeight / 2) + "px"; newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 - newDivWidth / 2) + "px"; } if (document.all) { window.attachEvent("onscroll", newDivCenter); } else { window.addEventListener('scroll', newDivCenter, false); } //关闭新图层和mask遮罩层 var newA = document.createElement("a"); newA.href = "#"; newA.innerHTML = "关闭"; newA.onclick = function() { if (document.all) { window.detachEvent("onscroll", newDivCenter); } else { window.removeEventListener('scroll', newDivCenter, false); } document.body.removeChild(docEle(_id)); document.body.removeChild(docEle(m)); return false; } newDiv.appendChild(newA); } </script> <body> <a style="cursor: pointer">点击弹出遮罩层</a> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </body> <script type="text/javascript"> openNewDiv('newDiv'); </script> </html>