这篇文章主要讲解了“JavaScript实现弹出层和背景变暗”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript实现弹出层和背景变暗”吧！
JavaScript弹出层和背景变暗
JavaScript弹出层，背景变暗，代码不算多，根据你的需要调整一下，这里只是实现了基础的思路，美化不是太好。
代码如下：
<title>JavaScript弹出层，背景变暗</title> <script> vardocEle=function(){ returndocument.getElementById(arguments[0])||false; } functionopenNewDiv(_id){ varm="mask"; if(docEle(_id))document.removeChild(docEle(_id)); if(docEle(m))document.removeChild(docEle(m)); //www.codefans.net新激活图层 varnewDiv=document.createElement("div"); newDiv.id=_id; newDiv.style.position="absolute"; newDiv.style.zIndex="9999"; newDiv.style.width="200px"; newDiv.style.height="300px"; newDiv.style.top="100px"; newDiv.style.left= (parseInt(document.body.scrollWidth)-300)/2+"px"; //屏幕居中 newDiv.style.background="EEEEEE"; newDiv.style.border="1pxsolid#0066cc"; newDiv.style.padding="5px"; newDiv.innerHTML="新激活图层内容"; document.body.appendChild(newDiv); //mask图层 varnewMask=document.createElement("div"); newMask.id=m; newMask.style.position="absolute"; newMask.style.zIndex="1"; newMask.style.width=document.body.scrollWidth+"px"; newMask.style.height=document.body.scrollHeight+"px"; newMask.style.top="0px"; newMask.style.left="0px"; newMask.style.background="#000"; newMask.style.filter="alpha(opacity=40)"; newMask.style.opacity="0.40"; document.body.appendChild(newMask); //docutmentwww.codefans.net //关闭mask和新图层 varnewA=document.createElement("a"); newA.href="#"; newA.innerHTML="关闭激活层"; newA.onclick=function(){ document.body.removeChild(docEle(_id)); document.body.removeChild(docEle(m)); returnfalse; } newDiv.appendChild(newA); } </script> <ahrefahref="#"onclick="openNewDiv(newDiv);returnfalse;"> 弹出新层</a>感谢各位的阅读，以上就是“JavaScript实现弹出层和背景变暗”的内容了，经过本文的学习后，相信大家对JavaScript实现弹出层和背景变暗这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
