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


Posted in Javascript onOctober 27, 2009
<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>
Javascript 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
基于vue 实现token验证的实例代码
Dec 14 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 #Javascript
Ajax+Json 级联菜单实现代码
Oct 27 #Javascript
javascript 关于# 和 void的区别分析
Oct 26 #Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 #Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 #Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 #Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 #Javascript
You might like
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
js模仿hover的具体实现代码
2013/12/30 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
js回调函数仿360开机
2019/12/26 Javascript
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
Python小进度条显示代码
2019/03/05 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
Python通过format函数格式化显示值
2020/10/17 Python
大学生的四年学习自我评价
2013/12/13 职场文书
大学生饮食配送创业计划书
2014/01/04 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
小学清明节活动方案
2014/03/08 职场文书
年底个人总结范文
2015/03/10 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
十八大观后感
2015/06/12 职场文书
银行安全保卫工作总结
2015/08/10 职场文书