遮罩层听起来貌似很复杂,其实说白了就是一个全界面的半透明的 div,用户不可以点击下边的元素,或者说是点击没有反应,接下来通过本文给大家介绍 JavaScript 如何制作遮罩层对话框,对 js 遮罩层相关知识感兴趣的朋友一起学习吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
1. 遮罩层其实就是一个覆盖全界面的半透明的 DIV,并处理 zIndex 使他浮于其他元素之上,是用户不能点击下边的元素,或者说点击没有反应。
2. 在遮罩层上方在弹出一个层,由于遮罩层挡住了其他所有元素,用户只能点击弹出层,制造出模式窗口的假象。
废话不多说了,直接给大家贴 js 代码了。
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>
- UntitledDocument
- </title>
- <script>
- function openDiv(newDivID) {
- var newMaskID = "mask"; //遮罩层id
- var newMaskWidth = document.body.scrollWidth; //遮罩层宽度
- var newMaskHeight = document.body.scrollHeight; //遮罩层高度
- //mask遮罩层
- var newMask = document.createElement("div"); //创建遮罩层
- newMask.id = newMaskID; //设置遮罩层id
- newMask.style.position = "absolute"; //遮罩层位置
- newMask.style.zIndex = "1"; //遮罩层zIndex
- newMask.style.width = newMaskWidth + "px"; //设置遮罩层宽度
- newMask.style.height = newMaskHeight + "px"; //设置遮罩层高度
- newMask.style.top = "0px"; //设置遮罩层于上边距离
- newMask.style.left = "0px"; //设置遮罩层左边距离
- newMask.style.background = "gray"; //#33393C//遮罩层背景色
- newMask.style.filter = "alpha(opacity=40)"; //遮罩层透明度IE
- newMask.style.opacity = "0.40"; //遮罩层透明度FF
- document.body.appendChild(newMask); //遮罩层添加到DOM中
- window.open('http://www.baidu.com', '_blank', 'width=500,height=260,menubar=no,toolbar=no'); //弹出子页面,具体自用自改
- //弹出层滚动居中
- 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("span");
- newA.href = "#";
- newA.style.position = "absolute"; //span位置
- newA.style.left = 350 + "px";
- newA.innerHTML = "Close";
- newA.onclick = function() //处理关闭事件
- {
- if (document.all) {
- window.detachEvent("onscroll", newDivCenter);
- } else {
- window.removeEventListener('scroll', newDivCenter, false);
- }
- document.body.removeChild(newMask); //移除遮罩层
- document.body.removeChild(newDiv); ////移除弹出框
- return false;
- }
- newDiv.appendChild(newA); //添加关闭span
- }
- </script>
- </head>
- <BODY>
- <a onclick="openDiv('newDiv');" style="cursor:pointer">
- 点我点我
- </a>
- <br>
- username:
- <input type="text" name="uname" />
- <br>
- u p w d:
- <input type="password" name="upwd" />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <a onclick="openDiv('newDiv');" style="cursor:pointer">
- 点我点我
- </a>
- </BODY>
- </html>
来源: http://www.phperz.com/article/17/0217/267381.html