当前位置: 代码迷 >> Web前端 >> 右上角弹出提示窗口(转)
  详细解决方案

右上角弹出提示窗口(转)

热度:66   发布时间:2012-10-28 09:54:44.0
右下角弹出提示窗口(转)

右下角弹出提示窗口的JS程序如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>Js特效--页面右下角弹出提示信息--捷扬网络</title>
		<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}

html,body {
	height: 100%;
}

body {
	font-size: 14px;
	line-height: 24px;
}

#tip {
	position: absolute;
	right: 0px;
	bottom: 0px;
	height: 0px;
	width: 180px;
	border: 1px solid #CCCCCC;
	background-color: #eeeeee;
	padding: 1px;
	overflow: hidden;
	display: none;
	font-size: 12px;
	z-index: 10;
}

#tip p {
	padding: 6px;
}

#tip h1,#detail h1 {
	font-size: 14px;
	height: 25px;
	line-height: 25px;
	background-color: #0066CC;
	color: #FFFFFF;
	padding: 0px 3px 0px 3px;
}

#tip h1 a,#detail h1 a {
	float: right;
	text-decoration: none;
	color: #FFFFFF;
}

#shadow {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #CCCCCC;
	-moz-opacity: 0.5;
	filter: Alpha(Opacity =   50);
	opacity: 0.8;
	z-index: 11;
	display: none;
	overflow: hidden;
}

#detail {
	width: 500px;
	height: 200px;
	border: 3px double #ccc;
	background-color: #FFFFFF;
	position: absolute;
	z-index: 30;
	display: none;
	left: 30%;
	top: 30%
}
</style>
		<script type="text/javascript">
	var handle;
	function start() {
		var obj = document.getElementById("tip");
		if (parseInt(obj.style.height) < 30) {
			obj.style.display = "block";
			//setInterval方法则是表示间隔一定时间反复执行某操作。
			handle = setInterval("changeH('up')", 2);
		} else {
			handle = setInterval("changeH('down')", 2)
		}
	}
	function changeH(str) {
		var obj = document.getElementById("tip");
		if (str == "up") {//每两毫秒加8px,直到长度为200px
			if (parseInt(obj.style.height) > 200)
				clearInterval(handle);//清除计数器
			else
				obj.style.height = (parseInt(obj.style.height) + 8).toString() + "px";
		}
		if (str == "down") {
			if (parseInt(obj.style.height) < 30) {//小于8时,就直接退出
				clearInterval(handle);
				//obj.style.display = "none";
			} else
				obj.style.height = (parseInt(obj.style.height) - 8).toString() + "px";
		}
	}
	function showwin() {
		document.getElementsByTagName("html")[0].style.overflow = "hidden";
		start();
		document.getElementById("shadow").style.display = "block";
		document.getElementById("detail").style.display = "block";
	}
	function recover() {
		document.getElementsByTagName("html")[0].style.享到新浪微博">
      
    
  相关解决方案