Js + Css的msn式的popup提示窗口的实现

Msn的提示窗口非常经典，所以我们也做一个javascript实现一下，给大家逗乐用。   闲话不多说，Javascript代码如下：

只有javascript代码还是不够的，我们还需要css来定义样式：

DIV#eMsg{}{     background-color: #c9d3f3;     border-left: #a6b4cf 1px solid;     border-right: #455690 1px solid;     border-top: #a6b4cf 1px solid;     border-bottom: #455690 1px solid;     visibility: hidden;     width: 199px;     height: 97px;     position: absolute;     z-index: 99999;     left: 0px; } DIV#eMsg DIV.eMsgInner {}{     border-top: #ffffff 1px solid;     border-left: #ffffff 1px solid;     background-color:#cfdef4;     height:96px;     width:198px; } DIV#eMsgInner DIV.head{}{width:197px} DIV.headLeft{}{width:30px;float:left;} DIV.headMiddle{}{     width:150px;     text-align:center;     float:left;     padding-top:2px;     color:green;     font-weight:bold } DIV.headRight{}{width:16;float:left;} DIV.headRight IMG{}{     width:13px;     height:13px;     border:0px;     cursor:hand;     margin:2px; } DIV.body{}{     height:82px;     clear:both;     border-right: #b9c9ef 1px solid;     padding: 13px;      padding-top: 1px;     border-top: #728eb8 1px solid;     border-left: #728eb8 1px solid;     color: #1f336b;     word-break: break-all;     border-bottom: #b9c9ef 1px solid; } DIV.light{}{text-align:center;padding:5px 20px} DIV.content{}{text-align:center;height:65px;padding-top:10px}

以上是所有的实现代码，我们在使用时还需要做以下两步 1．我们需要在body标签的前面加上加载message的语句 document.write('<sc' + 'ript>' + 'eMsg.createInstance("月牙儿工作室提示","<div align=left>新增加了邮箱登录和地图查询两个模块欢迎您添加使用。</div>");'); document.write('</s') document.write('cript>'); 2．还需要在body的onload事件中添加eMsg.onLoad();   这样就大功告成了，大家可以从我的博客中看到效果的。

有兴趣的朋友可以把它封装成.net控件呀。

/**//*eMsg*/ var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,i = 0; var eMsg = new Object(); eMsg.lightSrc = '../image/message/light.gif'; eMsg.closeSrc = '../image/message/msgclose.gif'; eMsg.id = 'eMsg'; eMsg.obj = function(){return document.getElementById(eMsg.id);};

eMsg.onLoad = function(){     try{         divTop = parseInt(eMsg.obj().style.top,10);         divLeft = parseInt(eMsg.obj().style.left,10);         divHeight = parseInt(eMsg.obj().offsetHeight,10);         divWidth = parseInt(eMsg.obj().offsetWidth,10);         docWidth = document.body.clientWidth;         docHeight = document.body.clientHeight;         eMsg.obj().style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;         eMsg.obj().style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth;         eMsg.obj().style.visibility="visible";         eMsg.timer = window.setInterval(eMsg.move,1);         hp.skin.onBeforChange = function(){             if(eMsg.obj())eMsg.obj().parentNode.removeChild(eMsg.obj());         };     }     catch(e){} }; eMsg.onResize = function(){     i+=1;     if(i>1000) eMsg.close();     try{         divHeight = parseInt(eMsg.obj().offsetHeight,10);         divWidth = parseInt(eMsg.obj().offsetWidth,10);         docWidth = document.body.clientWidth;         docHeight = document.body.clientHeight;         eMsg.obj().style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10);         eMsg.obj().style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10);     }     catch(e){} }; eMsg.move = function(){     try     {         if(parseInt(eMsg.obj().style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))         {             window.clearInterval(eMsg.timer);             eMsg.timer = window.setInterval(eMsg.onResize,1);         }         divTop = parseInt(eMsg.obj().style.top,10);         eMsg.obj().style.top = divTop - 1;     }     catch(e){} }; eMsg.close = function(){     eMsg.obj().parentNode.removeChild(eMsg.obj());     if(eMsg.timer) window.clearInterval(eMsg.timer); }; eMsg.createInstance = function(titleHtml,bodyHtml){     if(!titleHtml || !bodyHtml)throw '必须为titleHtml指定值,必须为bodyHtml指定值。';     var odiv = document.createElement('DIV');     odiv.id = eMsg.id;     odiv.innerHTML = '<div class="eMsgInner">'     + '<div class="head">'         + '<div class="headLeft"><img src="http://www.pushad.com/Info/space.gif" height="1" width="1"/></div>'         + '<div class="headMiddle">' + titleHtml + '</div>'         + '<div class="headRight"><img src="' + eMsg.closeSrc  + '" onclick="eMsg.close()" align="absmiddle"/></div>'     + '</div>'     + '<div class="body" oncontextmenu="eMsg.close();return false;" title="右键关闭">'         + '<div class="light"><IMG src="' + eMsg.lightSrc + '"></div>'         + '<div class="content">'         + bodyHtml            + '</div>'     + '</div>'     + '</div>';     document.body.appendChild(odiv); };

window.onresize = eMsg.onResize;

id="alimamaf0.8346290769565476" style="WIDTH: 468px; HEIGHT: 60px" border="0" name="alimamaf0.8346290769565476" marginwidth="0" marginheight="0" src="http://z.alimama.com/alimama.php?i=mm_10031633_124168_2563216&u=https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fwww.cnblogs.com%2Fgoody9807%2Farchive%2F2008%2F03%2F25%2F1121375.html&w=468&h=60&re=1280x1024&sz=12&r=https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fwww.cnblogs.com%2Fgoody9807%2Fdefault.html%3Fpage%3D3&cg=5ef0e28fac8b5eb0a20d0c82627d2ebd&prn=82599487&cas=prn&cah=994&caw=1280&ccd=32&ctz=8&chl=17&cja=1&cpl=0&cmm=0&cf=9.0&fu=-1&cbh=877&cbw=1260&iss=0&t=2&tc=0000FF&dc=000000&bgc=FFFFFF&bdc=E6E6E6&lc=008000&bmc=FFFFFF&as=0&bgp=0&ic=0&tt=Js%20%2B%20Css%E7%9A%84msn%E5%BC%8F%E7%9A%84popup%E6%8F%90%E7%A4%BA%E7%AA%97%E5%8F%A3%E7%9A%84%E5%AE%9E%E7%8E%B0%20-%20goody9807%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD&sx=0&sy=0&ac=343&pf=1" frameborder="0" scrolling="no">