js实现仿MSN带关闭功能的右下角弹窗代码

发表时间：2015-09-04来源：网络

本文实例讲述了js实现仿MSN带关闭功能的右下角弹窗代码。分享给大家供大家参考。具体如下：

这是一款非常精致漂亮的仿MSN右下角弹出窗口，带关闭功能，直接复制代码就管用。演示要用到几个小图片，运行的时候点击右键保存一下，这里提供一种思路，并不完全局限于此种方法，熟能生巧。

先来看看运行效果截图：

<HTML>
<HEAD>
<title>仿MSN右下角弹窗</title>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT language=Javascript>
document.writeln("<div id="msn" style="BORDER-RIGHT:#455690 1px solid; BORDER-TOP:#a6b4cf 1px solid; Z-INDEX:99999; LEFT:0px; BORDER-LEFT:#a6b4cf 1px solid; WIDTH:180px; BORDER-BOTTOM:#455690 1px solid; POSITION:absolute; TOP:0px; HEIGHT:116px; BACKGROUND-COLOR:#c9d3f3">");
document.writeln("<table width="100%" border="0" cellpadding="0" cellspacing="0" style="BORDER-TOP:#ffffff 1px solid; BORDER-LEFT:#ffffff 1px solid" bgcolor="#cfdef4">");
document.writeln("<tr><td height="24" width="26" style="FONT-SIZE:12px;BACKGROUND-IMAGE:url(images/msgTopBg.gif);COLOR:#0f2c8c" valign="middle"><img src="images/msgLogo.gif" hspace="5" align="absMiddle" vspace="1"/></td>");
document.writeln("<td style="FONT-WEIGHT:normal;FONT-SIZE:9pt;BACKGROUND-IMAGE:url(images/msgTopBg.gif);COLOR:#1f336b;PADDING-TOP:4px" valign="middle" width="100%">提示：</td>");
document.writeln("<td style="BACKGROUND-IMAGE:url(images/msgTopBg.gif);PADDING-TOP:2px" valign="middle" width="19" align="right"><img src="images/msgClose.gif" hspace="3" style="CURSOR:pointer" onclick="closeDiv()" title="关闭"/></td>");
document.writeln("</tr><tr><td colspan="3" height="90" style="PADDING-RIGHT:1px;BACKGROUND-IMAGE:url(images/msgBottomBg.jpg);PADDING-BOTTOM:1px">");
document.writeln("<div style="BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 9pt; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%"><a href="/jscss/" target="_blank" style="FONT-WEIGHT:bold;COLOR:red">>>游客：欢迎回来！</a><br><br><a href="http:/" target="_blank" style="FONT-WEIGHT:bold;COLOR:blue">>>您有（0）条短信息。</a></div></div></tr></table></div>");
msn.style.top=document.body.clientHeight-174;
msn.style.left=document.body.clientWidth-225;
moveR();
function moveR() {
msn.style.top=document.body.scrollTop+document.body.clientHeight-116;
msn.style.left=document.body.scrollLeft+document.body.clientWidth-180;
setTimeout("moveR();",80)
}
function closeDiv(){
msn.style.visibility='hidden';
}
</SCRIPT>
</HEAD>
<BODY style="MARGIN: 0px; TEXT-ALIGN: center">
<table width="776" border="0" cellpadding="0" cellspacing="0" bgcolor="#eeeeee">
 <tr>
  <td height="1060" align="center" valign="top"><p><br>
   </p>
   <p> </p>
   </td>
 </tr>
</table>
</BODY>
</HTML>

（免责声明：文章内容如涉及作品内容、版权和其它问题，请及时与我们联系，我们将在第一时间删除内容，文章内容仅供参考）

上一篇：js实现浮动在网页右侧的简洁QQ在线客服代码

下一篇：详解HTML的style标签以及相关的CSS引用