html 锁定页面(js遮罩层弹出div效果)

sdsjx0

2009-10-27

代码如下：

<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>

frm var position div js absolute