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 相关文章推荐
无语,javascript居然支持中文(unicode)编程!
Apr 12 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
javascript常用功能汇总
Jul 05 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
Json实现传值到后台代码实例
Jun 30 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 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
sony ICF-2010 拆解与改装
2021/03/02 无线电
php 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
php中JSON的使用与转换
2015/01/14 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
7个Javascript地图脚本整理
2009/10/20 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
基python实现多线程网页爬虫
2015/09/06 Python
Python找出9个连续的空闲端口
2016/02/01 Python
python实现二叉树的遍历
2017/12/11 Python
Numpy数组的保存与读取方法
2018/04/04 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
Python使用configparser库读取配置文件
2020/02/22 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
革命英雄事迹演讲稿
2014/09/13 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
护士旷工检讨书
2015/08/15 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python