`
highping
  • 浏览: 44120 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类

点击弹出窗口网页背景变暗且不可点的效果(二):iframe实现

阅读更多

        在http://highping.iteye.com/admin/blogs/362227中用DIV实现了点击弹出窗口网页背景变暗且不可点的效果,但对于div层显示的内容,在html页面中经常会出现被页面的select遮挡住,IE7解决了此类BUG;这里采用的方法是用Iframe作弹出窗口。
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>点击弹出窗口网页背景变暗且不可点的效果(iframe实现)</title>
<script LANGUAGE="JavaScript" src="dragiframe.js"></script>
<style type="text/css">
a {
	color: #000;
	font-size: 12px;
	text-decoration: none
}

a:hover {
	color: #900;
	text-decoration: underline
}

#mask {
	position: absolute;
	top: 0;
	left: 0;
	width: expression(body . scrollWidth);
	height: expression(body . scrollHeight);
	background: #d3ddea;
	filter: ALPHA(opacity = 60);
	z-index: 1;
	visibility: hidden
}
</style>
<script language="javascript">
	function centerLayer( obj ) {
	    var ocw = obj.clientWidth;
	    var och = obj.clientHeight;
	    var bsl = document.body.scrollLeft || document.documentElement.scrollLeft;
	    var bst = document.body.scrollTop || document.documentElement.scrollTop;
	    var bcw = document.body.clientWidth || document.documentElement.clientWidth;
	    var bch = document.body.clientHeight || document.documentElement.clientHeight;
	    var osl = bsl + Math.floor( ( bcw - ocw ) / 2 );
	        osl = Math.max( bsl , osl );
	    var ost = bst + Math.floor( ( bch - och ) / 2 );
	        ost = Math.max( bst , ost );
	    obj.style.left  = osl + 'px';
	    obj.style.top   = ost + 'px';
	}
   
  function openLayer(){
        iframe1.location="iframe1.html";
        mask.style.visibility='visible';
        document.getElementById('iframe1').style.display='';
        document.getElementById('iframe1').style.visibility='visible';
        var obj = document.getElementById('iframe1');
        centerLayer(obj);
   }
</script>

	</head>
	<body>
		<iframe name="iframe1" ID="iframe1"
			style="display: none; width: 350px; height: 200px; position: absolute; top: 50; left: 125; border: #DAEBF5 solid; border-width: 1 1 3 1; z-index: 101;"
			scrolling="no" src="#" frameborder=0></IFRAME>
		<div id="mask"></div>
		<span onClick="openLayer();" style="cursor: hand"><a href="#">显示提示信息</a>&nbsp;&nbsp;&nbsp;&nbsp;
			<select>
				<option>option1</option>
				<option>option2</option>
			</select>
		</span>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	</body>
</html>

<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>iframe1</title>
<script language="JavaScript" src="dragiframe.js"></script>
<style type="text/css">
a {
	color: #000;
	font-size: 12px;
	text-decoration: none
}

a:hover {
	color: #900;
	text-decoration: underline
}

#massage_box {
	position: absolute;
	left: expression((body.clientWidth-350)/ 2 );
	top: expression((body.clientHeight-200)/ 2 );
	width: 350px;
	height: 200px;
	filter: dropshadow(color = #666666, offx = 3, offy = 3, positive = 2);
	z-index: 2;
}

.massage {
	border: orange solid;
	border-width: 1 1 3 1;
	height: 173px;
	overflow-y: auto;
	background: #fff;
	color: #036;
	font-size: 12px;
	line-height: 150%
}

.header {
	background: orange;
	height: 24px;
	padding: 3 5 0 5;
	color: #fff;
	cursor: move;
}
</style>

<script language="javascript">
	function closeIframe(){
		parent.document.getElementById("mask").style.visibility='hidden'
		parent.document.getElementById("iframe1").style.display = "none";//关闭子窗口
	}
</script>
	</head>
	<body bgcolor="orange" onLoad="addHandle(document.getElementById('toolbar'), window);">
		<div id="massage_box">
			<div class="header" id="toolbar">
				<table height="24" border="0" cellpadding="0" cellspacing="0" width="100%" style="color: #fff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;">
					<tr>
						<td>用户使用规则</td>
						<td align="right">
							<span onClick="closeIframe();" style="cursor: hand">【确定】</span>
							<span onClick="closeIframe();" style="cursor: hand">【关闭】</span>
						</td>
					</tr>
				</table>
			</div>
			<div class="massage">
				<ul style="margin-right: 25">
					<li>
						用户必须自行配备上网和使用电信增值业务所需的设备,自行负担个人上网或第三方(包括但不限于电信或移动通信提供商)收取的通讯费、信息费等有关费用。
					</li>
					<li>
						您同意本服务仅供个人使用且非商业性质的使用,您不可对本服务任何部分或本服务之使用或获得(包括但不限于QQ号码),进行复制、拷贝、出售、或利用本服务进行调查、广告、或用于其他商业目的。
					</li>
					<li>
						保证自己在使用各服务时用户身份的真实性和正确性及完整性,如果资料发生变化, 您应及时更改。
					</li>
					<li>
						在安全完成本服务的登记程序并收到一个密码及帐号后,您应维持密码及帐号的机密安全。
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>

分享到:
评论

相关推荐

    2024华为OD机试D卷 - 最多购买宝石数目 - 免费看解析和代码.html

    私信博主免费获取真题解析以及代码

    华为OD机试D卷 - 小朋友来自多少小区 - 免费看解析和代码.html

    私信博主免费获取真题解析以及代码

    C51单片机的示例-课程实验-LCD1602基础开发库-内含源码和说明书.zip

    C51单片机的示例-课程实验-LCD1602基础开发库-内含源码和说明书.zip

    毕业设计 基于Python+Django+itemCF和userCF算法音乐推荐系统源码+详细文档+全部数据资料 高分项目

    【资源说明】 毕业设计 基于Python+Django+itemCF和userCF算法音乐推荐系统源码+详细文档+全部数据资料 高分项目 【备注】 1、该项目是高分毕业设计项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

    setuptools-51.3.1-py3-none-any.whl

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    基于python实现通过摄像头进行手势识别并进行控制vrep仿真机械臂+源码+文档(高分优秀项目)

    基于python实现通过摄像头进行手势识别并进行控制vrep仿真机械臂+源码+文档,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~ 项目简介: 通过摄像头进行手势识别,控制vrep仿真机械臂 anaconda 环境部署: conda create -n py37 python=3.7 pip install opencv-python conda install tensorflow==1.13.1 conda install keras==2.2.4 conda install matplotlib pip install imutils 程序介绍: label.py 采集,制作标签数据集 model.py 定义模型 train.py 模型训练 test.py 测试手势识别结果 main.py 控制机械臂主程序 vrep.py, vrepConst.py, remoteApi.so : vrep 为 windows 提供的官方接口 puma560.ttt vrep机械臂

    setuptools-42.0.0.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    setuptools-1.3.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    毕业设计 基于Python+Flask的知识图谱的推荐系统,音乐领域知识图谱3MKG源码+详细文档+全部数据资料 高分项目

    【资源说明】 毕业设计 基于Python+Flask的知识图谱的推荐系统,音乐领域知识图谱3MKG源码+详细文档+全部数据资料 高分项目 【备注】 1、该项目是高分毕业设计项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

    Python环形数组.docx

    环形数组

    Jira敏捷开发.pdf

    Jira敏捷开发.pdf

    十六进制转浮点数.vi

    十六进制转浮点数.vi

    华为OD机试D卷 - 掌握的单词个数 - 免费看解析和代码.html

    私信博主免费获取真题解析以及代码

    setuptools-32.2.0.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    MP4拖入压制,支持多文件拖入,可压缩至原体积的5%-20%基本无损

    MP4拖入压制,支持多文件拖入,可压缩至原体积的5%-20%基本无损,采用GCC编译,可略微增加压缩速度

    setuptools-3.6.tar.gz

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    2024华为OD机试D卷 - 最大矩阵和 - 免费看解析和代码.html

    私信博主免费获取真题解析以及代码

    setuptools-50.2.0-py3-none-any.whl

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    华为OD机试D卷 - 手机App防沉迷系统 - 免费看解析和代码.html

    私信博主免费获取真题解析以及代码

    卡通海洋0.0.5 凑11

    1,uv偏移 2,海岸线 3,海面透明度设置 4,海岸线噪音纹理(变体Shader) 5,海浪形变

Global site tag (gtag.js) - Google Analytics