搜索:
首页 >> JavaScript >> Javascript特效 >> Js实现仿msn的右下角popup提示窗口

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

2007-12-27 作者:天空诚 来源:中国Asp之家 投递文章

这个仿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><!--<IMG title=关闭 style="CURSOR: hand" onclick=closeDiv() hspace=3 src="msgClose.jpg">--></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()

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

完整程序演示:

[提示:你可先修改部分代码,再按运行]

Tags:popup  提示窗口  窗口  msn  js 
相关文章
手机版 Javascript特效 Asp之家 Aspxhome.com
闽ICP备06017341号