js点击弹出层代码,js弹出可关闭的遮罩层!点击文字即可弹出一个可以关闭的弹出层,相对来说,这款弹出层并不是太复杂,对于修改的话,也是挺方便的。 示例: <title>Js弹出层,新写的代码</title><br /> <script type="text/javascript"><br /> var docEle = function()<br /> {<br /> return document.getElementById(arguments[0]) || false;<br /> }<br /> function openNewDiv(_id)<br /> {<br /> var m = "mask";<br /> if (docEle(_id)) document.body.removeChild(docEle(_id));<br /> if (docEle(m)) document.body.removeChild(docEle(m));<br /> //Download by http://www.liehuo.net<br /> //mask遮罩层<br /> var newMask = document.createElement("div");<br /> newMask.id = m;<br /> newMask.style.position = "absolute";<br /> newMask.style.zIndex = "1";<br /> _scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth-100);<br /> _scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight-15);<br /> newMask.style.width = _scrollWidth + "px";<br /> newMask.style.height = _scrollHeight + "px";<br /> newMask.style.top = "0px";<br /> newMask.style.left = "0px";<br /> newMask.style.background = "#33393C";<br /> newMask.style.filter = "alpha(opacity=40)";<br /> newMask.style.opacity = "0.40";<br /> document.body.appendChild(newMask);<br /> //弹出层<br /> var newDiv = document.createElement("div");<br /> newDiv.id = _id;<br /> newDiv.style.position = "absolute";<br /> newDiv.style.zIndex = "9999";<br /> newDivWidth = 400;<br /> newDivHeight = 200;<br /> newDiv.style.width = newDivWidth + "px";<br /> newDiv.style.height = newDivHeight + "px";<br /> newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";<br /> newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";<br /> newDiv.style.background = "#EFEFEF";<br /> newDiv.style.border = "1px solid #860001";<br /> newDiv.style.padding = "5px";<br /> newDiv.innerHTML = "弹出层内容 <br/>";<br /> document.body.appendChild(newDiv);<br /> //弹出层滚动居中<br /> function newDivCenter()<br /> {<br /> newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2-50) + "px";<br /> newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2-50) + "px";<br /> }<br /> if(document.all)<br /> {<br /> window.attachEvent("onscroll",newDivCenter);<br /> }<br /> else<br /> {<br /> window.addEventListener('scroll',newDivCenter,false);<br /> }<br /> //关闭新图层和mask遮罩层<br /> var newA = document.createElement("a");<br /> newA.href = "#";<br /> newA.innerHTML = "关闭";<br /> newA.onclick = function()<br /> {<br /> if(document.all)<br /> {<br /> window.detachEvent("onscroll",newDivCenter);<br /> }<br /> else<br /> {<br /> window.removeEventListener('scroll',newDivCenter,false);<br /> }<br /> document.body.removeChild(docEle(_id));<br /> document.body.removeChild(docEle(m));<br /> return false;<br /> }<br /> newDiv.appendChild(newA);<br /> }<br /> </script><br /> <body><br /> <a onclick="openNewDiv('newDiv');return false;" style="cursor:pointer">点此弹出层</a><br /> <br /><br /> </body><br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示:可修改后代码再运行! 文章导航 JS滑动类效果,点击展开顶部层、左侧层Javascript简短代码实现层拖动效果