前几天因为任务需要做了一个窗口冻结的脚本,感觉多处需要重用,所以写成相对通用的代码。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <script type="text/javascript"> var lockColor = "blue"; //阻塞的背景颜色 var hasScroll = true; //设置阻塞后是否允许滚动 var scrollChange=false; //是否改变过滚动条状态 var canRclk = false; //设置冻结后是否允许在页面点击右键 var rClkEventChange=false; //是否禁止过右击 //为了兼容FF,获得添加事件的函数 var oEventUtil = new Object(); oEventUtil.addEventHandler = function(oTarget,sEventType,fnHandler) { if(oTarget.addEventListener) { oTarget.addEventListener(sEventType,fnHandler,false); } else if(oTarget.attachEvent){ oTarget.attachEvent('on'+sEventType,fnHandler); } else{ oTarget['on'+sEventType] = fnHandler; } }; oEventUtil.removeEventHandler=function(oTarget,sEventType,fnHandler){ if(oTarget.removeEventListener) { oTarget.removeEventListener(sEventType,fnHandler,false); } else if(oTarget.attachEvent){ oTarget.detachEvent('on'+sEventType,fnHandler); } }; function lock(){ //使frame铺满界面,冻结select等元素 var lockFrame=document.getElementById("lockFrame"); var contentHeight=document.body.clientHeight > document.body.scrollHeight ? document.body.clientHeight : document.body.scrollHeight; var contentWidth=document.body.clientWidth > document.body.scrollWidth ? document.body.clientWidth : document.body.scrollWidth; var frameStyle=lockFrame.style; frameStyle.height=contentHeight; frameStyle.width=contentWidth; frameStyle.display="block"; //使div铺满界面,冻结frame元素 var lockDiv=document.getElementById("lockDiv"); var divStyle=lockDiv.style; divStyle.height=contentHeight; divStyle.width=contentWidth; divStyle.backgroundColor=lockColor; divStyle.display="block"; if(!hasScroll){ document.body.style.overflow="hidden"; scrollChange=true; } if(!canRclk){ oEventUtil.addEventHandler(document.body,"contextmenu",modifyEvent); rClkEventChange=true; } } //解锁冻结窗口 function unlock(){ document.getElementById("lockFrame").style.display="none"; document.getElementById("lockDiv").style.display="none"; //还原之前的修改 if(scrollChange){ document.body.style.overflow="visible"; } if(rClkEventChange){ oEventUtil.removeEventHandler(document.body,"contextmenu",modifyEvent); alert("可以右击了"); // oEventUtil.addEventHandler(document.body,"contextmenu",function(){}); } } var modifyEvent=function(){window.event.returnValue=false;alert("禁止右击");} function doLock(){ lock(); document.getElementById("testDiv").style.display="block"; } function doUnlock(){ unlock(); document.getElementById("testDiv").style.display="none"; } </script> <iframe id="lockFrame" name="lockFrame" src="about:blank;" style="display:none;position:absolute;left:0px;top:0px;z-index:97;filter:alpha(opacity=0);opacity=0" ></iframe> <div id="lockDiv" style="display:none;position:absolute;left:0px;top:0px;z-index:98;filter:alpha(opacity=10);opacity=0.1" > </div> <input type="button" value="冻结窗口" οnclick="doLock()" /> <div style="display:none;position:absolute;left:200px;top:30px;width:600px;height:500px;z-index:99;background:blue" id="testDiv"> <input type="button" value="解冻窗口" οnclick="doUnlock()" /> </div> </BODY> </HTML>