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

最新推荐文章于 2024-02-04 15:50:50 发布

w_gaoping

最新推荐文章于 2024-02-04 15:50:50 发布

阅读量304

点赞数

文章标签：电信 QQ HTML

本文链接：https://blog.csdn.net/w_gaoping/article/details/83369454

版权

在[url]http://highping.iteye.com/admin/blogs/362227[/url]中用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>    
			<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>

w_gaoping

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击弹出窗口网页背景变暗且不可点的效果(二)：iframe实现

在[url]http://highping.iteye.com/admin/blogs/362227[/url]中用DIV实现了点击弹出窗口网页背景变暗且不可点的效果，但对于div层显示的内容，在html页面中经常会出现被页面的select遮挡住，IE7解决了此类BUG；这里采用的方法是用Iframe作弹出窗口。[code="html"] 点击弹出窗口网...
复制链接

扫一扫