制作网页遮罩

来源：互联网发布：雨滴美化软件编辑：程序博客网时间：2024/04/29 03:15

一、制作全屏遮罩层

要求：1、半透明遮罩整个网页

2、屏蔽用户对遮罩层下方元素的操作

制作：

1、获取遮罩层的宽高

因为主要覆盖的目的主要是屏蔽用户的部分操作，所以只要覆盖浏览器内容就好了，也就是说覆盖body部分。

使用：document.body.clientWidth、document.body.clientHeight。

此方法各浏览器通用，获取的是目前BODY的宽高。

2、获取了遮罩层的宽高后，我们只要为其定义 absolute ，然后将其固定到左上角。再设置其透明度就可以了。

用document.body.clientWidth有一个缺点，他如果用户缩小浏览器窗口，再扩大浏览器窗口，扩大的部分不会被遮罩住。

为了得到到好的交易，宽度简单的用 div.style.width = "100%" 就可以了。

遮罩 1.0 JS代码

/************************************************** * dom-drag.js * 09.25.2001 * www.youngpup.net * Script featured on Dynamic Drive (http://www.dynamicdrive.com) 12.08.2005 ************************************************** * 10.28.2001 - fixed minor bug where events * sometimes fired off the handle, not the root. **************************************************/function pageWidth(){ return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;}function fBigDiv(){var sWidth = "100%";var sHeight = document.body.clientHeight > window.screen.availHeight?document.body.clientHeight:window.screen.availHeight;var div = document.createElement("div");div.setAttribute("id","BigDiv");div.style.width = sWidth;div.style.height = sHeight + "px";div.style.position = "absolute";div.style.top = "0px";div.style.left = "0px";div.style.zIndex = 5000;div.style.backgroundColor = "#777"div.style.filter = "Alpha(opacity=60)"; div.style.opacity = "0.6";document.body.appendChild(div);var sMyDiv =document.getElementById("MyDiv");sMyDiv.style.top = "300px";sMyDiv.style.left = "300px";sMyDiv.style.display = "block";}window.onload=function(){document.getElementById("button1").onclick = function(){fBigDiv();}document.getElementById("button2").onclick = function(){document.getElementById("MyDiv").style.display="none";document.body.removeChild(BigDiv);}}

HTML部分

<!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>遮罩</title> <mce:script src="2.js" mce_src="2.js" type="text/javascript"></mce:script> </head><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body{padding:0;margin:0;text-align:center;}#warp{text-align:left;margin:0 auto;}#textBox{margin:0 auto;width:100%;height:600px;}.button{margin-left:130px;}#MyDiv{ position:absolute; width:200px; height:200px; font-size:12px; background:#666; border:1px solid #000; z-index:5001; display:none; text-align:center;}</style><body><div id="warp"><div style="width:300px; margin:0 auto;"><p id="textBox"></p><input type="button" id="button1" class="button" value="确定" /></div> <div id="MyDiv"> <h1>点击按钮关闭</h1> <input type="button" id="button2" class="button" value="关闭" /> </div></div></body></html>