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

更新时间：2009年10月27日 23:00:28 作者：

html 锁定页面(js遮罩层弹出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>

您可能感兴趣的文章:

Web层改进II-用xmlhttp 无声息提交复杂表单
Web层改进II-用xmlhttp 无声息提交复杂表单...
2007-01-01
JavaScript函数的4种调用方法详解
了解函数的调用过程有助于深入学习与分析JavaScript代码。本文是JavaScript高级这个系列中的第三篇文章，主要介绍JavaScript中函数的四种使用形式
2014-04-04
javascript实现浏览器窗口传递参数的方法
这篇文章主要介绍了javascript实现浏览器窗口传递参数,需要的朋友可以参考下
2014-09-09
javascript简单实现滑动菜单效果的方法
这篇文章主要介绍了javascript简单实现滑动菜单效果的方法,实例分析了javascript通过对页面元素与相关属性的操作实现滑动菜单效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
SOSO地图JS画出标注和中心点以html形式运行
SOSO地图想必大家都知道吧，本文将为大家详细介绍下使用JS画出标注和中心点,直接贴出代码，感兴趣的朋友可以参考下
2013-08-08
tablesorter.js表格排序使用方法(支持中文排序)
这篇文章主要为大家详细介绍了tablesorter.js表格排序使用方法，支持中文排序，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
获取JavaScript异步函数的返回值
本文给大家分享的是如何解决获取JavaScript异步函数返回值的经历及最后的解决方法，有需要的小伙伴可以参考下
2016-12-12
javascript实现控制浏览器全屏
这篇文章主要介绍了javascript实现控制浏览器全屏的代码分享给大家，十分的实用，有需要的小伙伴可以参考下。
2015-03-03
js取得html iframe中的元素和变量值
想要取得iframe中的元素和js变量值，不能用$(document).ready()方法，而是要用$("#iframeId").load()方法
2014-06-06
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
这篇文章主要是对JavaScript中的常见问题解决方法(乱码,IE缓存,代理)进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11