网页右下角弹窗代码

网页右下角弹窗代码，整合了很多东西，代码有点乱，暂时不做整理，先留着备份一下。

<%@ page contentType="text/html;charset=UTF-8"%>

<style type="text/css">
<%--右下角通知公告弹窗 start--%>
#msg_win {
	border: 1px solid #75D7FC;
	background: #EFFFFF;  <%--弹窗背景色--%>;
	position: absolute;
	right: 16;  <%-- 相对于右下角的宽度 --%>;
	font-size: 12px;
	font-family: Arial;
	margin: 0px;
	display: none;
	overflow: hidden;
	z-index: 99;
}

#msg_win .icos {
	position: absolute;
	top: 0px;
	right: 2px;
	z-index: 9;
}

.icos a {
	float: left;
	color: #833B02;
	margin: 1px;
	text-align: center;
	font-weight: bold;
	width: 14px;
	height: 22px;
	line-height: 22px;
	padding: 1px;
	text-decoration: none;
	font-family: 'webdings';
}

.icos a:hover {
	color: #fff;
}

#msg_title {
	background: #75D7FC url(bar_bg.gif) repeat-x 0 100%;
	border-bottom: 1px solid #A67901;
	border-top: 1px solid #FFF;
	border-left: 1px solid #FFF;
	color: #000;
	height: 25px;
	line-height: 25px;
	text-indent: 5px;
}

#msg_content {
	margin: 5px;
	margin-right: 0;
	overflow: hidden;
	text-align: center;
}

#button
{
	border-right: medium none;
	border-top: medium none;
	font-size: 12px;
	color:#000000;
	font-weight: normal;
	background-image: url(button_bg.gif);
	border-left: medium none;
	padding-top: 2px;
	border-bottom: medium none;
	height:18px;
	line-height:18px;
	vertical-align : text-bottom ;
}
<%--右下角通知公告弹窗end --%>

</style>

<script>
    <%--右下角通知公告弹窗 start--%>
    var Message = {
    		close : function() {// 关闭
    			this.win.style.display = 'none';
    			window.onscroll = null;
    		},
    		show : function() {// 渐显
    			clearInterval(this.timer2);
    			var me = this, fx = this.fx(0, 100, 0.1), t = 0;
    			this.timer2 = setInterval(function() {
    				t = fx();
    				if (t[1] == 0) {
    					clearInterval(me.timer2);
    				}
    			}, 10);
    		},
    		fx : function(a, b, c) {// 缓冲计算
    			var cMath = Math[(a - b) > 0 ? "floor" : "ceil"], c = c || 0.1;
    			return function() {
    				return [ a += cMath((b - a) * c), a - b ];
    			}
    		},
    		getY : function() {// 计算移动坐标
    			var d = document, b = document.body, e = document.documentElement;
    			var s = Math.max(b.scrollTop, e.scrollTop);
    			var h = /BackCompat/i.test(document.compatMode) ? b.clientHeight : e.clientHeight;
    			var h2 = this.win.offsetHeight;
    			return {
    				foot : s + h + h2 + 2 + 'px',
    				top : s + h - h2 - 28 + 'px' //28 弹出框往上移设置
    			}
    		},
    		moveTo : function(y) {// 移动动画
    			clearInterval(this.timer);
    			var me = this, a = parseInt(this.win.style.top) || 0;
    			var fx = this.fx(a, parseInt(y));
    			var t = 0;
    			this.timer = setInterval(function() {
    				t = fx();
    				me.win.style.top = t[0] + 'px';
    				if (t[1] == 0) {
    					clearInterval(me.timer);
    					me.bind();
    				}
    			}, 10);
    		},
    		bind : function() {// 绑定窗口滚动条与大小变化事件
    			var me = this, st, rt;
    			window.onscroll = function() {
    				clearTimeout(st);
    				clearTimeout(me.timer2);
    				st = setTimeout(function() {
    					me.win.style.top = me.getY().top;
    					me.show();
    				}, 280);
    			};
    			window.onresize = function() {
    				clearTimeout(rt);
    				rt = setTimeout(function() {
    					me.win.style.top = me.getY().top;
    				}, 100);
    			}
    		},
    		init : function() {// 创建HTML
    			function $(id) {
    				return document.getElementById(id);
    			};
    			if(document.getElementById("msg_win")) {
    				this.win = document.getElementById("msg_win");
    			} else {
    				this.win = document.createElement('DIV');
    			}
    			this.win.style.width = 277; //改变窗口的大小
    			this.win.style.height = 180;
    			this.win.id = "msg_win";
    			this.win.innerHTML = '<div class="icos"><a href="javascript:void 0" title="关闭" id="msg_close">r</a></div><div id="msg_title">通知公告</div><div id="msg_content"></div>';
    			document.body.appendChild(this.win);
    			var set = {
    				closebtn : 'msg_close',
    				title : 'msg_title',
    				content : 'msg_content'
    			};
    			for ( var Id in set) {
    				this[Id] = $(set[Id]);
    			}
    			;
    			var me = this;
    			this.closebtn.onclick = function() {
    				me.close();
    			};
    			this.char = navigator.userAgent.toLowerCase().indexOf('firefox') + 1 ? [
    					'_', '::', '×' ]
    					: [ '0', '2', 'r' ];// FF不支持webdings字体
    			this.closebtn.innerHTML = this.char[2];
    			setTimeout(function() {// 初始化最先位置
    						me.win.style.display = 'block';
    						me.win.style.top = me.getY().foot;
    						me.moveTo(me.getY().top);
    					}, 280);
    			return this;
    		}
    	};

    	//间隔几分钟读取一次通知公告的xml
    	var noticeTime = <%=request.getAttribute("noticeTime")%>;
		function reloadNotice() {
			$.post("${URL}/gg/ggNotice!readXmlFile.action", function(data){
				if(data=="" || data==null) {
					window.setTimeout("reloadNotice()",noticeTime*60*1000);//设置5分钟后自动刷新
				} else {
					var notice = data.split("O6B2DU5LI56449Y5U34NB47981779267");
					Message.init();
					Message.title.innerHTML = '<img src="${URL}/images/gg_msg.gif" /><a href="#" οnclick="newNotice();" >  您有' + notice[0] + '条新的消息</a>';
					//Message.title.innerHTML = '您有' + notice[0] + '条新的通知';
					Message.content.style.width = "270";
			    	Message.content.style.height = "140";

			    	var title = '<div style="text-align:center; font-weight: bold;">' + notice[1] + '</div>';
			    	var content = '<div style="text-align:left; margin-top:5px;">' + notice[2] + '</div>';
			    	var noticeallocateguid = "'" + notice[3] + "'";
			    	var preDiv = '<div style="margin-top:50px;float:right;margin-right:8px; ">';
			    	var preRecord = '<a href="#" οnclick="preNotice(' + notice[4] + ')" class="button" >上一条</a>  ';
			    	var nextRecord = '<a href="#" οnclick="nextNotice(' + notice[4] + ')" class="button" >下一条</a>  ';
			    	var viewBtn = '<a href="#" οnclick="viewNotice(' + noticeallocateguid + ')" class="button" >查看</a>  ';
			    	//var viewBtn = '<div style="margin-top:80px;float:right; "><a target="_blank" href="${URL}/gg/ggNoticeAllocate!view.action?id=' + notice[3] + '" class="button" >查看</a>  ';
			    	var closeBtn = '<a href="#" οnclick="closeNotice();" class="button" >不再提示</a></div>';
			    	Message.content.innerHTML = title + content + preDiv + preRecord + nextRecord + viewBtn + closeBtn;
			    	window.setTimeout("reloadNotice()",noticeTime*60*1000);//设置5分钟后自动刷新
				}
			})
		}
		function newNotice() {
			document.getElementById("msg_win").style.display = 'none';
			window.open("${URL}/gg/ggNoticeAllocate!.action", "查看所有新消息");
		}
		
		function viewNotice(noticeallocateguid) {
			document.getElementById("msg_win").style.display = 'none';
			$.post("${URL}/gg/ggNotice!closeNotice.action",
					{noticeallocateguid:noticeallocateguid},
					function(data){
			})
			window.open("${URL}/gg/ggNoticeAllocate!view.action?flag=1&noticeallocateguid=" + noticeallocateguid, "查看消息");
		}
		function closeNotice() {
			document.getElementById("msg_win").style.display = 'none';
			$.post("${URL}/gg/ggNotice!closeAllNotice.action",
					function(data){
			})
		}
		
		$(function(){
			if(noticeTime != 0) {
				reloadNotice();
			}
		})
		
		function preNotice(addtime) {
			$.post("${URL}/gg/ggNotice!readXmlFile.action",
					{addtime:addtime, flag:1},
					function(data){
						if(data!="" && data!=null) {
							var notice = data.split("O6B2DU5LI56449Y5U34NB47981779267");
							Message.title.innerHTML = '<img src="${URL}/images/gg_msg.gif" /><a href="#" οnclick="newNotice();" >  您有' + notice[0] + '条新的消息</a>';
							Message.content.style.width = "270";
					    	Message.content.style.height = "140";

					    	var title = '<div style="text-align:center; font-weight: bold;">' + notice[1] + '</div>';
					    	var content = '<div style="text-align:left; margin-top:5px;">' + notice[2] + '</div>';
					    	var noticeallocateguid = "'" + notice[3] + "'";
					    	var preDiv = '<div style="margin-top:50px;float:right;margin-right:8px; ">';
					    	var preRecord = '<a href="#" οnclick="preNotice(' + notice[4] + ')" class="button" >上一条</a>  ';
					    	var nextRecord = '<a href="#" οnclick="nextNotice(' + notice[4] + ')" class="button" >下一条</a>  ';
					    	var viewBtn = '<a href="#" οnclick="viewNotice(' + noticeallocateguid + ')" class="button" >查看</a>  ';
					    	var closeBtn = '<a href="#" οnclick="closeNotice();" class="button" >不再提示</a></div>';
					    	Message.content.innerHTML = title + content + preDiv + preRecord + nextRecord + viewBtn + closeBtn;
						}
			})
		}
		
		function nextNotice(addtime) {
			$.post("${URL}/gg/ggNotice!readXmlFile.action",
					{addtime:addtime, flag:2},
					function(data){
						if(data!="" && data!=null) {
							var notice = data.split("O6B2DU5LI56449Y5U34NB47981779267");
							Message.title.innerHTML = '<img src="${URL}/images/gg_msg.gif" /><a href="#" οnclick="newNotice();" >  您有' + notice[0] + '条新的消息</a>';
							Message.content.style.width = "270";
					    	Message.content.style.height = "140";

					    	var title = '<div style="text-align:center; font-weight: bold;">' + notice[1] + '</div>';
					    	var content = '<div style="text-align:left; margin-top:5px;">' + notice[2] + '</div>';
					    	var noticeallocateguid = "'" + notice[3] + "'";
					    	var preDiv = '<div style="margin-top:50px;float:right;margin-right:8px; ">';
					    	var preRecord = '<a href="#" οnclick="preNotice(' + notice[4] + ')" class="button" >上一条</a>  ';
					    	var nextRecord = '<a href="#" οnclick="nextNotice(' + notice[4] + ')" class="button" >下一条</a>  ';
					    	var viewBtn = '<a href="#" οnclick="viewNotice(' + noticeallocateguid + ')" class="button" >查看</a>  ';
					    	var closeBtn = '<a href="#" οnclick="closeNotice();" class="button" >不再提示</a></div>';
					    	Message.content.innerHTML = title + content + preDiv + preRecord + nextRecord + viewBtn + closeBtn;
						}
			})
		}
    	<%--右下角通知公告弹窗 start--%>
</script>