Web页面右下角弹出窗口示例代码

Web页面右下角弹出窗口示例代码

声明：本代码来源于CSDN论坛，原帖为http://community.csdn.net/Expert/TopicView3.asp?id=5239784
版权归原作者所有，本人只做收藏整理。

< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html;charset=gb2312" >
< meta name ="Keywords" content ="51windows.Net" >
< META NAME ="Author" CONTENT ="haiwa" >
< title > 类似MSN提示的页面效果 </ title >
</ head >
< body scroll =no >
看到右下角的提示了吗？如果没有看到， < button onclick =location.reload(); > 刷新 </ button > 一下
< script language ="JavaScript" > ...
window.onload=getMsg;
window.onresize=resizeDiv;
window.onerror=function()...{}
//短信提示使用(asilas添加)
vardivTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i=0;
functiongetMsg()
...{
try...{
divTop=parseInt(document.getElementById("eMeng").style.top,10)
divLeft=parseInt(document.getElementById("eMeng").style.left,10)
divHeight=parseInt(document.getElementById("eMeng").offsetHeight,10)
divWidth=parseInt(document.getElementById("eMeng").offsetWidth,10)
docWidth=document.body.clientWidth;
docHeight=document.body.clientHeight;
document.getElementById("eMeng").style.top=parseInt(document.body.scrollTop,10)+

docHeight+10;//divHeight
document.getElementById("eMeng").style.left=parseInt(document.body.scrollLeft,10)+

docWidth-divWidth
document.getElementById("eMeng").style.visibility="visible"
objTimer=window.setInterval("moveDiv()",10)
}
catch(e)...{}
}
functionresizeDiv()
...{
i+=1
if(i>500)closeDiv()
try...{
divHeight=parseInt(document.getElementById("eMeng").offsetHeight,10)
divWidth=parseInt(document.getElementById("eMeng").offsetWidth,10)
docWidth=document.body.clientWidth;
docHeight=document.body.clientHeight;
document.getElementById("eMeng").style.top=docHeight-divHeight+parseInt

(document.body.scrollTop,10)
document.getElementById("eMeng").style.left=docWidth-divWidth+parseInt

(document.body.scrollLeft,10)
}
catch(e)...{}
}
functionmoveDiv()
...{
try
...{
if(parseInt(document.getElementById("eMeng").style.top,10)<=(docHeight-divHeight+

parseInt(document.body.scrollTop,10)))
...{
window.clearInterval(objTimer)
objTimer=window.setInterval("resizeDiv()",1)
}
divTop=parseInt(document.getElementById("eMeng").style.top,10)
document.getElementById("eMeng").style.top=divTop-1
}
catch(e)...{}
}
functioncloseDiv()
...{
document.getElementById('eMeng').style.visibility='hidden';
if(objTimer)window.clearInterval(objTimer)
}
</ script >
< DIV id =eMeng style ="BORDER-RIGHT:#4556901pxsolid;BORDER-TOP:#a6b4cf1pxsolid;Z-

INDEX:99999;LEFT:0px;VISIBILITY:hidden;BORDER-LEFT:#a6b4cf1pxsolid;WIDTH:180px;

BORDER-BOTTOM:#4556901pxsolid;POSITION:absolute;TOP:0px;HEIGHT:116px;BACKGROUND

-COLOR:#c9d3f3" >
< TABLE style ="BORDER-TOP:#ffffff1pxsolid;BORDER-LEFT:#ffffff1pxsolid" cellSpacing =0

cellPadding =0 width ="100%" bgColor =#cfdef4 border =0 >
< TBODY >
< TR >
< TD style ="FONT-SIZE:12px;BACKGROUND-IMAGE:url(msgTopBg.gif);COLOR:#0f2c8c" width =30

height =24 ></ TD >
< TD style ="FONT-WEIGHT:normal;FONT-SIZE:12px;BACKGROUND-IMAGE:url(msgTopBg.gif);

COLOR:#1f336b;PADDING-TOP:4px;PADDING-left:4px" vAlign =center width ="100%" > 短消息提示

： </ TD >
< TD style ="BACKGROUND-IMAGE:url(msgTopBg.gif);PADDING-TOP:2px;PADDING-right:2px"

vAlign =center align =right width =19 >< span title =关闭 style ="CURSOR:hand;color:red;font-

size:12px;font-weight:bold;margin-right:4px;" onclick =closeDiv() > × </ span > <!-- <IMG

title=关闭style="CURSOR:hand"onclick=closeDiv()hspace=3src="msgClose.jpg"> --> </ TD >
</ TR >
< TR >
< TD style ="PADDING-RIGHT:1px;BACKGROUND-IMAGE:url(1msgBottomBg.jpg);PADDING-BOTTOM:

1px" colSpan =3 height =90 >
< DIV style ="BORDER-RIGHT:#b9c9ef1pxsolid;PADDING-RIGHT:13px;BORDER-TOP:#728eb81px

solid;PADDING-LEFT:13px;FONT-SIZE:12px;PADDING-BOTTOM:13px;BORDER-LEFT:#728eb81px

solid;WIDTH:100%;COLOR:#1f336b;PADDING-TOP:18px;BORDER-BOTTOM:#b9c9ef1pxsolid;

HEIGHT:100%" > 您有 < font color =#FF0000 > 1 </ font > 封新短消息 < BR >< BR >
< DIV align =center style ="word-break:break-all" >< a href ="javascript:alert('你好')" >< font

color =#FF0000 > 点击查看短信 </ font ></ a ></ DIV
</DIV >
</ TD >
</ TR >
</ TBODY >
</ TABLE >
</ DIV >
</ body >
</ html >

调试时注意关闭IE防广告插件！