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

highping

浏览: 44125 次
性别:
来自: 深圳

最近访客更多访客>>

xinli16

麦兜猪

wait_876

张云飞

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (15)

社区版块

存档分类

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

电信 QQ HTML

在http://highping.iteye.com/admin/blogs/362230中用Iframe实现了点击弹出窗口网页背景变暗且不可点的效果，虽然解决了弹出窗口被select遮挡住的问题，但网页背景的select依然没有被遮挡住，IE7解决了此类BUG；这里仍然采用Iframe作网页透明背景，让背景的select控件不可选。

<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
}
</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";
        document.getElementById('iframe1').style.display='';
        document.getElementById('iframe1').style.visibility='visible';
        document.getElementById('mask').style.display='';
        document.getElementById('mask').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>
		<iframe name="mask" id="mask"
			style="display: none; width: expression(body . scrollWidth); height: expression(body . scrollHeight); background: #666; position: absolute; top: 0; left: 0; border: 0px solid #000; background-color: transparent; filter: ALPHA(opacity = 20);"
			src="mask.html" frameborder=0></iframe>
		<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>

<html>
	<head>
		<title></title>
	</head>
	<body style="background-color: transparent; overflow-y: hidden; overflow-x: hidden" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" scroll="yes">
		<table border="0" width=100% height=100% bgcolor="#d3ddea">
			<tr>
				<td></td>
			</tr>
		</table>
	</body>
</html>