位置：首页>> 网络编程>> JavaScript>> Js实现仿msn的右下角popup提示窗口

Js实现仿msn的右下角popup提示窗口

　来源：asp之家　发布时间：2007-12-27 20:30:00　

标签：popup,提示窗口,窗口,msn,js

这个仿msn的右下角popup提示窗口效果很久以前收集的，现在整理出来给大家分享，需要的朋友可以拿去用，特点，提示窗口内容和js代码分离容易自由设计、更改提示窗口的内容。

虽然网络上很多这种代码，但是很多都是把提示学习直接写在了js代码中，这样如果想更改窗口样式就不是很容易了，需要大家懂一点Javascript代码，而这个只要你懂普通的html代码就够了。

如下面的popup提示窗口内容代码，你只要设置div的id为eMeng，内容你可以随便设计。

CSS部分：

<style type=text/css>
#eMeng{BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX:99999; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: 180px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 116px; BACKGROUND-COLOR: #EDF5FF}
.tb1{BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid}
.td1{font-weight: normal; font-size: 12px; color: #ffffff; padding-left: 4px; padding-top: 4px}
.td2{padding-right: 2px; padding-top: 2px}
.f1{CURSOR: hand;color:white;font-size:12px;font-weight:bold;margin-right:4px;}
.pop1{BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 12px; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100％; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100％}
</style>

html部分：

<DIV id=eMeng>
<TABLE class="tb1" cellSpacing=0 cellPadding=0 width="100％" bgColor=#EDF5FF border=0>
<TBODY>
<TR bgColor=#6699cc>
<TD width=30 height=24></TD>
<TD vAlign=center width="100％" class="td1"> asp之家提示：</TD>
<TD class="tb2" vAlign=center align=right width=19><span title=关闭 class="f1" onclick=closeDiv() >×</span></TD>
</TR>
<TR>
<TD colSpan=3 height=90>
<DIV class="pop1">Js + Css实现msn式的popup提示窗口，欢迎使用！<BR>
<DIV align=center><a href="http://www.aspxhome.com" target="_blank">
<font color=#FF0000>进入asp之家</font></a></DIV>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>

提示窗口效果图，当然你可以自己美化：

这个右下角popup提示代码，运行后默认是5秒的时间自动关闭，如果想更改更长的显示时间：

if(i>300) closeDiv()

这里的300，就是300毫秒。修改这个值就可以了，如果不想提示信息自动关闭可以注释掉这个代码：

//if(i>300) closeDiv()

这样只有访客点击了关闭按钮才会消失！

完整程序演示：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>Js实现仿msn的右下角popup提示窗口 - asp之家 - http://www.aspxhome.com</title><Script language="javascript"></Script><style type=text/css>#eMeng{BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX:99999; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: 180px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 116px; BACKGROUND-COLOR: #EDF5FF}.tb1{BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid}.td1{font-weight: normal; font-size: 12px; color: #ffffff; padding-left: 4px; padding-top: 4px}.td2{padding-right: 2px; padding-top: 2px}.f1{CURSOR: hand;color:white;font-size:12px;font-weight:bold;margin-right:4px;}.pop1{BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 12px; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100％; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100％}</style></head><body><DIV id=eMeng><TABLE class="tb1" cellSpacing=0 cellPadding=0 width="100％" bgColor=#EDF5FF border=0><TBODY><TR bgColor=#6699cc><TD width=30 height=24></TD><TD vAlign=center width="100％" class="td1"> asp之家提示：</TD><TD class="tb2" vAlign=center align=right width=19><span title=关闭 class="f1" onclick=closeDiv() >×</span></TD></TR><TR><TD colSpan=3 height=90><DIV class="pop1">Js + Css实现msn式的popup提示窗口，欢迎使用！<BR><DIV align=center><a href="http://www.aspxhome.com" target="_blank"><font color=#FF0000>进入asp之家</font></a></DIV></DIV></TD></TR></TBODY></TABLE></DIV></body></html>

投稿

Js实现仿msn的右下角popup提示窗口

猜你喜欢