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

最新推荐文章于 2021-06-28 12:40:33 发布

w_gaoping

最新推荐文章于 2021-06-28 12:40:33 发布

阅读量1.1k

点赞数 1

文章标签：电信 QQ

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

版权


<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>点击弹出窗口网页背景变暗且不可点的效果(div实现)</title>
<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;
	visibility: hidden
}

#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
}

.massage {
	border: orange solid;
	border-width: 1 1 3 1;
	height: 176px;
	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">
	var Obj=''
	document.onmouseup=MUp
	document.onmousemove=MMove

	function MDown(Object){
		Obj=Object.id
		document.all(Obj).setCapture()
		pX=event.x-document.all(Obj).style.pixelLeft;
		pY=event.y-document.all(Obj).style.pixelTop;
	}

	function MMove(){
		if(Obj!=''){
		  document.all(Obj).style.left=event.x-pX;
		  document.all(Obj).style.top=event.y-pY;
		}
	}

	function MUp(){
		if(Obj!=''){
		  document.all(Obj).releaseCapture();
		  Obj='';
		}
	}

	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 closeLayer(){
		massage_box.style.visibility='hidden'; 
		mask.style.visibility='hidden';//关闭子窗口
	}

	function openLayer(){
		mask.style.visibility='visible';
		massage_box.style.visibility='visible';
		var obj = document.getElementById('massage_box');
		centerLayer( obj );
	}
</script>

	</head>
	<body>
		<div id="massage_box">
			<div class="header" onmousedown=MDown(massage_box)>
				<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="closeLayer();" style="cursor: hand">【确定】</span>
							<span onClick="closeLayer();" 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>
		<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>