有关js锁定页面急~~~~~~~~~~~~！

我想实现这样一个功能，当我弹出一个div出来，当前页面就不能作任何操作。
我试过用隐藏来实现，但有严格要求要把当前页面的内容显示出来。
我试过用遮罩层实现，但是当前页面和div重叠在一起的时候什么也看不清楚。
能有其它的方法实现吗？我想实现的效果是当前页面内容显示出来不能作操作，弹出的div操作完才能让当前页面操作。
就像锁定当前页面一样。谁可以在我的例子改下呢？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document </title>
<script>
function createIframe(){
//mask遮罩层    var newMask = document.createElement("div");
    newMask.id = "mDiv";
    newMask.style.position = "absolute";
    newMask.style.zIndex = "1";
    _scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
_scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
   // _scrollHeight = Math.max(document.body.offsetHeight,document.documentElement.scrollHeight);
    newMask.style.width = _scrollWidth + "px";
    newMask.style.height = _scrollHeight + "px";
    newMask.style.top = "0px";
    newMask.style.left = "0px";
    newMask.style.background = "#33393C";
//newMask.style.background = "#FFFFFF";
    newMask.style.filter = "alpha(opacity=40)";
    newMask.style.opacity = "0.40";
    newMask.style.display = 'none';


var objDiv = document.createElement("DIV");
objDiv.id = "div1";
objDiv.name = "div1";
objDiv.style.width = "480px";
objDiv.style.height = "200px";
objDiv.style.left = (_scrollWidth-480)/2 + "px";
objDiv.style.top = (_scrollHeight-200)/2 + "px";
objDiv.style.position = "absolute";
objDiv.innerHTML = ' <div id="drag" style="position:absolute;height:20px;width:100%;z-index:10001;top:0; background-color:#0033FF;cursor:move ;" align="right"><input type=button value="X" onclick="document.getElementById(\'mDiv\').style.display=\'none\'"/></div>';
objDiv.style.border = "solid #0033FF  3px;"; var frm = document.createElement("iframe");
frm.id = "ifrm";
frm.name = "ifrm";
frm.style.position = "absolute";
frm.style.width = "100%";
frm.style.height = 180;
frm.style.top = 20;
frm.style.display = '';
frm.frameborder=0;
objDiv.appendChild(frm);
newMask.appendChild(objDiv);
document.body.appendChild(newMask);
var objDrag = document.getElementById("drag");
var drag = false;
var dragX = 0;
var dragY = 0;
objDrag.attachEvent("onmousedown",startDrag);
function startDrag(){
if(event.button == 1 && event.srcElement.tagName.toUpperCase() =="DIV"){
objDrag.setCapture();
objDrag.style.background = "#0000CC";
drag = true;
dragX = event.clientX;
dragY = event.clientY;
}
};
objDrag.attachEvent("onmousemove",Drag);
function Drag(){
if(drag){
var oldwin = objDrag.parentNode;
oldwin.style.left = oldwin.offsetLeft + event.clientX - dragX;
oldwin.style.top = oldwin.offsetTop + event.clientY - dragY;
oldwin.style.left = event.clientX - 100;
oldwin.style.top = event.clientY - 10;
dragX = event.clientX;
dragY = event.clientY;
}
};
objDrag.attachEvent("onmouseup",stopDrag);
function stopDrag(){
objDrag.style.background = "#0033FF";
objDrag.releaseCapture();
drag = false;
};
}
function htmlEditor(){
var frm = document.getElementById("ifrm");
var objDiv = document.getElementById("div1");
var mDiv = document.getElementById("mDiv");
mDiv.style.display='';
var iframeTextContent = '';
iframeTextContent += ' <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">';
iframeTextContent += ' <html xmlns="http://www.w3.org/1999/xhtml">';
  iframeTextContent += ' <head>';
  iframeTextContent += ' <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />';
  iframeTextContent += ' </head>';
iframeTextContent += ' <body>';
iframeTextContent += ' <table>';
iframeTextContent += ' <tr>';
iframeTextContent += ' <td>Name </td>';
  iframeTextContent += ' <td> <input type="text" value="" /> </td>';
  iframeTextContent += ' </tr>';
  iframeTextContent += ' <tr>';
  iframeTextContent += ' <td>Email </td>';
  iframeTextContent += ' <td> <input type="text" value="" /> </td>';
  iframeTextContent += ' </tr>';
  iframeTextContent += ' <tr>';
  iframeTextContent += ' <td> <input type="button" id="btGo" value="Go" /> </td>';
  iframeTextContent += ' </tr>';
  iframeTextContent += ' </table>';
  iframeTextContent += ' </body>';
  iframeTextContent += ' </html>';
frm.contentWindow.document.designMode = 'off';
  frm.contentWindow.document.open();
  frm.contentWindow.document.write(iframeTextContent);
  frm.contentWindow.document.close(); var objGo = frm.contentWindow.document.getElementById("btGo");
  objGo.attachEvent("onclick",function(){HideIframe(mDiv);});
} function HideIframe(mDiv){
  mDiv.style.display = 'none';
}
</script>
</head> <body onLoad="createIframe()">
<table>
    <tr>
        <td>aa</td>
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td>bb</td>
        <td><input type="text"/></td>
    </tr>
</table>
<br/>
<input type="button" id="tt" name="tt" value="Click" onClick="htmlEditor()" />
</body>
</html>
备注：弹出来的div页面拖动到输入框那里就能看出重叠的问题了。
http://jquery.com/demo/thickbox/
简单写了个。<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <style type="text/css">
    div,input{font-size:12px}
    </style>
    <script type="text/javascript">        var modalContainer;        window.onload = function()
        {
            modalContainer = document.getElementById("modalContainer");
            modalContainer.style.width = document.documentElement.clientWidth + "px";
            modalContainer.style.height = document.documentElement.clientHeight + "px";
            document.getElementById("unlockbtn").style.left = (document.documentElement.clientWidth - 80) + "px";
        }        function clickHandler()
        {
            modalContainer.style.display = "block";
            document.getElementsByTagName("select")[0].style.visibility = "hidden";
        }        function unlockHandler()
        {
            document.getElementById("unlocklayer").style.display = "block";
        }        function unlockEvent()
        {
            if (document.getElementById("password").value == "password")
            {
                modalContainer.style.display = "none";
            }
        }

    </script>
</head>
<body>
<form><div id="modalContainer" style="z-index:1;background-color:#ccc;filter:alpha(opacity=70);opacity:0.7;position:absolute;top:0px;left:0px;display:none">
<div id="unlockbtn" style="width:80px;position:relative;top:20px;"><input type="button" onclick="unlockHandler()" value="解除锁定" /></div><div id="unlocklayer" style="position:relative;display:none;border:1px solid #999;width:400px;margin:auto;background-color:#fff;">
<div style="padding:4px;background-color:#ffffcc;">解除锁定</div>
<div style="padding:4px;">
密码 <input type="text" id="password" /><input type="button" value="解锁" onclick="unlockEvent()" />
</div>
</div>
</div>
<div>
<select>
<option>Asp.Net</option>
<option>SQL Server</option>
</select>
<input type="button" onclick="clickHandler()" value="锁屏" />
</div></form>
</body>
</html>
//用遮罩层实现，但是当前页面和div重叠在一起的时候什么也看不清楚。
设置一下显示顺序并把焦点设置在最上面的层上。
如何实现鼠标指定div不同的边框，鼠标样式将有相应的变化。不知道怎么去判断。有没有谁有相关这方面的代码。或者谁能帮我解决只指定右下角缩放div的大小。我现在用了下斜鼠标样式。谢谢大家！！！！！！！！！！！！！！！
大家来帮我解决下有关div缩放问题哦，在不同的方向有明显的鼠标样式区别，还有是缩放也跟着方向改变。
另一个问题就是怎么去锁定当前页面。在此谢谢大家光顾。
div缩放还是有问题，谁能帮我解决下。谢谢
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document </title>
<script>
function createIframe(){
//mask遮罩层    var newMask = document.createElement("div");
    newMask.id = "mDiv";
    newMask.style.position = "absolute";
    newMask.style.zIndex = "1";
    _scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
_scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
   // _scrollHeight = Math.max(document.body.offsetHeight,document.documentElement.scrollHeight);
    newMask.style.width = _scrollWidth + "px";
    newMask.style.height = _scrollHeight + "px";
    newMask.style.top = "0px";
    newMask.style.left = "0px";
    newMask.style.background = "#33393C";
//newMask.style.background = "#FFFFFF";
    newMask.style.filter = "alpha(opacity=40)";
    newMask.style.opacity = "0.40";
    newMask.style.display = 'none';


var objDiv = document.createElement("DIV");
objDiv.id = "div1";
objDiv.name = "div1";
objDiv.style.width = "480px";
objDiv.style.height = "200px";
objDiv.style.left = (_scrollWidth-480)/2 + "px";
objDiv.style.top = (_scrollHeight-200)/2 + "px";
objDiv.style.position = "absolute";
objDiv.innerHTML = ' <div id="drag" style="position:absolute;height:20px;width:100%;top:0; background-color:#0033FF;" align="right"><input type=button value="X" onclick="document.getElementById(\'mDiv\').style.display=\'none\'"/></div>';
objDiv.style.border = "solid #0033FF  3px;"; var frm = document.createElement("iframe");
frm.id = "ifrm";
frm.name = "ifrm";
frm.style.position = "absolute";
frm.style.width = "100%";
frm.style.height = 180;
frm.style.top = 20;
frm.style.display = '';
frm.frameborder=0;
objDiv.appendChild(frm);
newMask.appendChild(objDiv);
document.body.appendChild(newMask);
var objDrag = document.getElementById("drag");
var drag = false;
var dragX = 0;
var dragY = 0;
objDrag.attachEvent("onmousedown",startDrag);
function startDrag(){
if(event.button == 1 && event.srcElement.tagName.toUpperCase() =="DIV"){
objDrag.setCapture();
objDrag.style.cursor = "move";
objDrag.style.zIndex = "1001";
objDrag.style.background = "#0000CC";
drag = true;
dragX = event.clientX;
dragY = event.clientY;
event.cancelBubble=true;
event.returnValue=false;
}
};
objDrag.attachEvent("onmousemove",Drag);
function Drag(){
if(drag){
var oldwin = objDrag.parentNode;
oldwin.style.left = oldwin.offsetLeft + event.clientX - dragX;
oldwin.style.top = oldwin.offsetTop + event.clientY - dragY;
oldwin.style.left = event.clientX - 100;
oldwin.style.top = event.clientY - 10;
dragX = event.clientX;
dragY = event.clientY;
}
};
objDrag.attachEvent("onmouseup",stopDrag);
function stopDrag(){
objDrag.style.background = "#0033FF";
objDrag.style.zIndex = "1";
objDrag.style.cursor = "default";
objDrag.releaseCapture();
drag = false;
};//drag div pageSize
var down = 0;
objDiv.attachEvent("onmousedown",moveStart);
function moveStart(){
objDiv.style.cursor = "se-resize";
objDiv.setCapture();
objDiv.style.zIndex = "1001";
down = 1;
event.cancelBubble=true;
event.returnValue=false;
};
objDiv.attachEvent("onmousemove",moving);
function moving(){
if(down){
objDiv.style.width = (xx = event.x - objDiv.offsetLeft) > -1 ? xx : objDiv.style.width;
objDiv.style.height = (yy = event.x - objDiv.offsetTop) > -1 ? yy : objDiv.style.height;
try{
frm.style.width = (xx - 4) + 'px';
frm.style.height = (yy - 24) + 'px';
}catch(e){}
}
};
objDiv.attachEvent("onmouseup",moveEnd);
function moveEnd(){
down = 0;
objDiv.style.cursor = "default";
objDiv.style.zIndex = "1";
objDiv.releaseCapture();
};
}
function htmlEditor(){
var frm = document.getElementById("ifrm");
var objDiv = document.getElementById("div1");
var mDiv = document.getElementById("mDiv");
mDiv.style.display='';
var iframeTextContent = '';
iframeTextContent += ' <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">';
iframeTextContent += ' <html xmlns="http://www.w3.org/1999/xhtml">';
  iframeTextContent += ' <head>';
  iframeTextContent += ' <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />';
  iframeTextContent += ' </head>';
iframeTextContent += ' <body>';
iframeTextContent += ' <table>';
iframeTextContent += ' <tr>';
iframeTextContent += ' <td>Name </td>';
  iframeTextContent += ' <td> <input type="text" value="" /> </td>';
  iframeTextContent += ' </tr>';
  iframeTextContent += ' <tr>';
  iframeTextContent += ' <td>Email </td>';
  iframeTextContent += ' <td> <input type="text" value="" /> </td>';
  iframeTextContent += ' </tr>';
  iframeTextContent += ' <tr>';
  iframeTextContent += ' <td> <input type="button" id="btGo" value="Go" /> </td>';
  iframeTextContent += ' </tr>';
  iframeTextContent += ' </table>';
  iframeTextContent += ' </body>';
  iframeTextContent += ' </html>';
frm.contentWindow.document.designMode = 'off';
  frm.contentWindow.document.open();
  frm.contentWindow.document.write(iframeTextContent);
  frm.contentWindow.document.close(); var objGo = frm.contentWindow.document.getElementById("btGo");
  objGo.attachEvent("onclick",function(){HideIframe(mDiv);});
} function HideIframe(mDiv){
  mDiv.style.display = 'none';
}
</script>
</head> <body onLoad="createIframe()">
<table>
    <tr>
        <td>aa</td>
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td>bb</td>
        <td><input type="text"/></td>
    </tr>
</table>
<br/>
<input type="button" id="tt" name="tt" value="Click" onClick="htmlEditor()" />
</body>
</html>
用遮盖实现，
用于遮盖的层z-index要在其他上面，
上面不能是空的，你可放一个半透明背景图，这样也好看。
遮盖了当前页面跟div页面重叠的区域就看不清楚了，你看下我上面的代码就知道了。
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>UntitledDocument</title>
<script>
function createIframe(){
//mask遮罩层
var newMask=document.createElement("div");
newMask.id="mDiv";
newMask.style.position="absolute";
newMask.style.zIndex="1";
_scrollWidth=Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
_scrollHeight=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
// _scrollHeight = Math.max(document.body.offsetHeight,document.documentElement.scrollHeight);
newMask.style.width=_scrollWidth+"px";
newMask.style.height=_scrollHeight+"px";
newMask.style.top="0px";
newMask.style.left="0px";
newMask.style.background="#33393C";
//newMask.style.background = "#FFFFFF";
newMask.style.filter="alpha(opacity=40)";
newMask.style.opacity="0.40";
newMask.style.display='none';
var objDiv=document.createElement("DIV");
objDiv.id="div1";
objDiv.name="div1";
objDiv.style.width="480px";
objDiv.style.height="200px";
objDiv.style.left=(_scrollWidth-480)/2+"px";
objDiv.style.top=(_scrollHeight-200)/2+"px";
objDiv.style.position="absolute";
objDiv.style.zIndex="2"; //加了这个语句让objDiv浮在newMask之上
objDiv.style.display="none"; //让objDiv预先隐藏
objDiv.innerHTML=' <div id="drag" style="position:absolute;height:20px;width:100%;z-index:10001;top:0; background-color:#0033FF;cursor:move ;" align="right"> <input type=button value="X" onclick="HideIframe(document.getElementById(\'mDiv\'),document.getElementById(\'div1\'));"/> </div>';
//更改了X按钮为触发关闭事件。
objDiv.style.border="solid #0033FF  3px;";
var frm=document.createElement("iframe");
frm.id="ifrm";
frm.name="ifrm";
frm.style.position="absolute";
frm.style.width="100%";
frm.style.height=180;
frm.style.top=20;
frm.style.display='';
frm.frameborder=0;
objDiv.appendChild(frm);
// newMask.appendChild(objDiv); //问题出在这里：你把frame所在的div变成了 newMask的子元素，当newMask透明度更改时，当然会影响到frame
document.body.appendChild(newMask);
document.body.appendChild(objDiv);
var objDrag=document.getElementById("drag");
var drag=false;
var dragX=0;
var dragY=0;
objDrag.attachEvent("onmousedown",startDrag);
function startDrag(){
if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV"){
objDrag.setCapture();
objDrag.style.background="#0000CC";
drag=true;
dragX=event.clientX;
dragY=event.clientY;
}
};
objDrag.attachEvent("onmousemove",Drag);
function Drag(){
if(drag){
var oldwin=objDrag.parentNode;
oldwin.style.left=oldwin.offsetLeft+event.clientX-dragX;
oldwin.style.top=oldwin.offsetTop+event.clientY-dragY;
oldwin.style.left=event.clientX-100;
oldwin.style.top=event.clientY-10;
dragX=event.clientX;
dragY=event.clientY;
}
};
objDrag.attachEvent("onmouseup",stopDrag);
function stopDrag(){
objDrag.style.background="#0033FF";
objDrag.releaseCapture();
drag=false;
};
}
function htmlEditor(){
var frm=document.getElementById("ifrm");
var objDiv=document.getElementById("div1");
var mDiv=document.getElementById("mDiv");
mDiv.style.display='';
var iframeTextContent='';
iframeTextContent+=' <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">';
iframeTextContent+=' <html xmlns="http://www.w3.org/1999/xhtml">';
iframeTextContent+=' <head>';
iframeTextContent+=' <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />';
iframeTextContent+=' </head>';
iframeTextContent+=' <body>';
iframeTextContent+=' <table>';
iframeTextContent+=' <tr>';
iframeTextContent+=' <td>Name </td>';
iframeTextContent+=' <td> <input type="text" value="" /> </td>';
iframeTextContent+=' </tr>';
iframeTextContent+=' <tr>';
iframeTextContent+=' <td>Email </td>';
iframeTextContent+=' <td> <input type="text" value="" /> </td>';
iframeTextContent+=' </tr>';
iframeTextContent+=' <tr>';
iframeTextContent+=' <td> <input type="button" id="btGo" value="Go" /> </td>';
iframeTextContent+=' </tr>';
iframeTextContent+=' </table>';
iframeTextContent+=' </body>';
iframeTextContent+=' </html>';
frm.contentWindow.document.designMode='off';
frm.contentWindow.document.open();
frm.contentWindow.document.write(iframeTextContent);
frm.contentWindow.document.close();
objDiv.style.display = ""; //显示浮动的div
var objGo=frm.contentWindow.document.getElementById("btGo");
objGo.attachEvent("onclick",function (){
HideIframe(mDiv,objDiv);
});
}function HideIframe(mDiv,objDiv){
mDiv.style.display='none';
objDiv.style.display = "none"; //隐藏浮动的div
}
</script>
</head><body onLoad="createIframe()">
<table>
<tr>
<td>aa</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>bb</td>
<td><input type="text"/></td>
</tr>
</table>
<br/>
<input type="button"id="tt"name="tt"value="Click"onClick="htmlEditor()"/>
</body>
</html>