AJAX弹出提示信息效果

最新推荐文章于 2024-12-11 09:41:48 发布

原创最新推荐文章于 2024-12-11 09:41:48 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JavaScript 专栏收录该内容

23 篇文章

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>提示信息框</title>
<style type="text/css">
a {
	color: #000;
	font-size: 12px;
	text-decoration: none
}

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

body {
	background: ;
	filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,
		startColorStr=#ffffff, endColorStr=#003366 );
	overflow: hidden
}

#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: #666;
	filter: ALPHA(opacity = 60);
	z-index: 1;
	visibility: hidden
}

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

.header {
	background: #036;
	height: 10%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 3 5 0 5;
	color: #fff
}
</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 = '';
		}
	}
</script>
</head>
<body>
	<div id="massage_box">
		<div class="massage">
			<div class="header" onmousedown=MDown(massage_box)>
				<div style="display: inline; width: 150px; position: absolute">本站提示信息</div>
				<span
					onClick="massage_box.style.visibility='hidden'; mask.style.visibility='hidden'"
					style="float: right; display: inline; cursor: hand">×</span>
			</div>
			<ul style="margin-right: 25">
				<li>本人申明此博客所有文章（包括文章插图）均为原创，如需引用或转载请注明出处。</li>
				<li>欢迎大家对博文中观点留言评述，谢绝无聊人士无素质无观点的灌水漫骂。</li>
				<li>本站已设背景音乐，听音乐盒中收集的音乐时请先到页面底部关闭背景音乐。</li>
			</ul>
		</div>
	</div>
	<div id="mask"></div>
	<span
		onClick="mask.style.visibility='visible';massage_box.style.visibility='visible'"
		style="cursor: hand"><a href="#">显示提示信息</a></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>