html 锁定页面(js遮罩层弹出div效果)
发布时间：2024-08-27 08:02:25
标签：弹出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>
0
投稿猜你喜欢
- 在开发Web应用时，无一例外地需要访问数据库，以完成对数据的查询、插入、更新、删除等操作。受应用逻辑的影响，有时需要将多条数据库操作指令组成
- <div id="msg"></div> <input type="text&q
故事还得从下面的图说起：what? 两条sql执行结果的id列居然不一致。。。。。。一、LIMIT 处理过程为了故事的顺利发展，我们得先创建- python txt中的文件,逐行读取并且每行赋值给变量最近想做自动化，想到可能会用到很多账号密码，所以想到了用参数化，但是一个用户，一个密
- 数据库锁介绍： https://www.jb51.net/article/248863.htm一、查询oracle锁定的表：1、锁相关表SE
- sqlserver2008不支持关键字limit ，所以它的分页sql查询语句将不能用MySQL的方式进行，幸好sqlserver2008提
- 定义一个绘制甘特图的类# -*- coding: utf-8 -*-from datetime import datetimeimport
- 在移动端开发应用UI组件也会遇到一系列需要注意的问题。问题1比如说，标签页是一个整体的组件，但是我们需要将标签页的标题和其他组件一起固定到顶
- 近些时间在开始学MySQL，安装挺顺利的，按照网上现成的教程就能安装成功。但是，在输入mysql -uroot -p再输入密码时，遇到了这个
- 本文实例为大家分享了vue实现列表倒计时的具体代码，供大家参考，具体内容如下如图10分钟倒计时在做项目的时候遇到vue列表要用到倒计时的方法
- 乱码原因：源码文件的编码格式为utf-8，但是window的本地默认编码是gbk，所以在控制台直接打印utf-8的字符串当然是乱码了！解决方
- unittest模块是Python自带的一个单元测试模块，我们可以用来做单元测试。unittest模块包含了如下几个子模块：测试用例：Tes
- 语法格式：row_number() over(partition by 分组列 order by 排序列 desc)row_num
- 问题详情：偶然在根目录创建文件夹的时候，突然显示错误，当时很惊讶，以前没遇见过这样的问题。当时界面是这样的。 用了一个 cd / 命令从用户
- 1.找到缺失值导入数据集df=pd.read_csv("nba.csv")df.head(10)替换异常值（数据集中异常
- 这篇文章主要介绍了Django rstful登陆认证并检查session是否过期代码实例，下面我们可以来一起学习一下。一：restful用户
- 需求：该接口，含两个参数，一个是file，一个是paperName。其中file为上传的文件。content-type为form-data。
- 通常，我们会采用ORDER BY LIMIT start, offset 的方式来进行分页查询。例如下面这个SQL：SELECT * FRO
- PDOStatement::fetchPDOStatement::fetch — 从结果集中获取下一行(PHP 5 >= 5.1.0,
- *****看一下我定义的change（）和run（）函数******绘图坐标体系：作用：设置主窗体的大小和位置turtle.setup(wi
