Js + Css的msn式的popup提示窗口的实现
Msn的提示窗口非常经典，所以我们也做一个javascript实现一下，给大家逗乐用。
闲话不多说，Javascript代码如下：
/*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="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;只有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();
这样就大功告成了，大家可以从我的博客中看到效果的。
