MSN弹出式消息提示窗口的JS实现

       MSN弹出式消息提示是一直想实现的效果，但苦于不知道如何计算DIV标签在页面上具体位移和搞不清DIV标签层定位原理，导致一直都没有实现MSN弹出式消息提示效果。
       MSN弹出式消息提示效果图（A-01）：
      
       前些日子，通过赵玉开发表一篇关于“Js + Css的msn式的popup提示窗口的实现” 文章(原文地址：赵玉开博客)后，给了我实现上的启发,并他实现的基础上拓展新功能：增加最大化窗口和最小化窗口切换。在效果图上可以看到是用“-”号(最小化窗口)表示。 
       闲话不多说了,实现脚本如下：
      

<script language="javascript">
var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,i = 0;
var popupMessage = new Object();
popupMessage.id = 'popupMessage';
popupMessage.obj = function(){
  return document.getElementById(popupMessage.id);
};
popupMessage.onLoad = function(){
    try{
        divTop = parseInt(popupMessage.obj().style.top,10); 
        divLeft = parseInt(popupMessage.obj().style.left,10);
        divHeight = parseInt(popupMessage.obj().offsetHeight,10);
        divWidth = parseInt(popupMessage.obj().offsetWidth,10);
        docWidth = document.body.clientWidth;
        docHeight = document.body.clientHeight;

        popupMessage.obj().style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;
        popupMessage.obj().style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth;
        popupMessage.obj().style.visibility="visible";
        popupMessage.timer = window.setInterval(popupMessage.move,2);
       
    }
    catch(e){}
};
popupMessage.onResize = function(){
    i+=1;
    if(i>1000) popupMessage.close();
    try{
        divHeight = parseInt(popupMessage.obj().offsetHeight,10);
        divWidth = parseInt(popupMessage.obj().offsetWidth,10);
        docWidth = document.body.clientWidth;
        docHeight = document.body.clientHeight;
        popupMessage.obj().style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10);
        popupMessage.obj().style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10);
    }
    catch(e){}
};
popupMessage.move = function(){
    try
    {
        if(parseInt(popupMessage.obj().style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))
        {
            window.clearInterval(popupMessage.timer);
            popupMessage.timer = window.setInterval(popupMessage.onResize,1);
        }
        divTop = parseInt(popupMessage.obj().style.top,10);
        popupMessage.obj().style.top = divTop - 1;
    }
    catch(e){}
};
popupMessage.close = function(){
    if(popupMessage.obj()) popupMessage.obj().parentNode.removeChild(popupMessage.obj());
    if(popupMessage.timer) window.clearInterval(popupMessage.timer);
};
popupMessage.createInstance = function(bodyHtml){
  try
  {
    if(popupMessage.obj())popupMessage.obj().parentNode.removeChild(popupMessage.obj());
    if(popupMessage.timer) window.clearInterval(popupMessage.timer);   
    i=0;
    var odiv = document.createElement('DIV');
    odiv.id = popupMessage.id;
    odiv.style.width="199px";
    odiv.style.height="auto";
    odiv.style.visibility="hidden";
    odiv.style.position="absolute";
    odiv.style.zIndex="99999";
    odiv.style.left="0px";
    
    odiv.innerHTML = bodyHtml;
    document.body.appendChild(odiv);

  }
  catch(e){}
};

window.onresize = popupMessage.onResize;

function popupMessagePopup(bodyHtml)
{
    popupMessage.createInstance(bodyHtml);
    popupMessage.onLoad();
}
 
 popupMessage.convertWin = function(){
     var msg = document.getElementById('msgContent'); 
     var contentdis = document.getElementById('btContent');
     var flg = msg.style.display=="none";
     if(flg)
     {
          contentdis.innerHTML = '—';
          contentdis.title='最小化窗口';      
          msg.style.display = "block";
     }
     else
     {
          contentdis.innerHTML = '□';
          contentdis.title='最大化窗口'; 
          msg.style.display = "none";
     }
 }

function myPopup()
{
  popupMessagePopup('<div style="width:199px; height:auto;font-size:12px;border:solid 1px #3399FF;background-color:#CFDEF4; ">'+
     '<div style="width:199px;height:20px; float:left; ">'+
       '<span style="width:140px;float:left;text-align:left;text-indent:8px;padding:4px; color:#0C53C5;">消息提示</span>'+
       '<span title="关闭" style="width:15px;border-width:0px;float:right;margin-right:5px;padding:4px; color:Red; cursor: hand; font-weight:bold;" onclick="popupMessage.close();return false;">×</span>'+
       '<span id="btContent" title="最小化窗口" style="width:15px;border-width:0px;float:right;padding:4px 4px 4px 4px; margin-right:7px;color:Red;cursor: hand;font-weight:bold;" onclick="popupMessage.convertWin();">—</span>'+
     '</div>'+
     '<div id="msgContent" style="width:199px;height:60px; float:left;WORD-BREAK: break-all; padding:8px 8px 8px 8px;border-top:solid 1px #3399FF; text-align:left; text-indent:10px; "><a href="http://seeker.cnblogs.com/" target="_blank" style="font-size:15px; color:Red;">欢迎您访问Seeker博客</a></div>'+
  '</div>');
}

window.onload = myPopup;

</script>

        以上的JS代码，只需要嵌入到HTML文件上，就可以大功告成了。显示效果如A-01图所示。
       引用到学习资源:
         1: 层定位原理
         2: 利用JS来开发属于自己的js对象(createElement对象) 

     有兴趣的朋友，看看能否再改进下该功能，让其支持消息窗口拖动。谢谢大家欢迎访问SEEKER博客。