右下角弹出式窗口

javascript代码：

<script type="text/javascript">
 var div1;
 function scall(){
 div1.style.top=getScrollTop() + getClientHeight() - div1.offsetHeight + "px";   	 
  }
        
  function showMessage(){
  div1 = document.getElementById("div");
  div1.style.left =getClientWidth() + getScrollLeft() -div1.offsetWidth + "px";
  div1.style.display="block";
  scall();
}
	   
 function closeMessage(){
    div1.style.display="none";
  }
  window.onscroll=scall;
  window.onresize=scall;
  window.onload=scall;
	
/*ClientHeight*/
function getClientHeight() {    
 return clientHeight = window.document.documentElement.clientHeight;  
} 

/*ClientWidth*/
function getClientWidth() {    
return window.document.documentElement.clientWidth;     
}   
	   
/*ScrollTop*/
function getScrollTop() {    
    var scrollPos = 0;     
    if (typeof window.pageYOffset != 'undefined') {     
       scrollPos = window.pageYOffset;     
    }     
    else if (typeof window.document.compatMode != 'undefined' &&     
       window.document.compatMode != 'BackCompat') {     
       scrollPos = window.document.documentElement.scrollTop;     
    }     
    else if (typeof window.document.body != 'undefined') {     
       scrollPos = window.document.body.scrollTop;     
    }     
    return scrollPos;    
}
/*end ScrollTop*/

/*ScrollLeft*/
function getScrollLeft(){
    var scrollPos =0;
    if (typeof window.pageXOffset != 'undefined') {     
       scrollPos = window.pageXOffset;     
    }     
    else if (typeof window.document.compatMode != 'undefined' &&     
       window.document.compatMode != 'BackCompat') {     
       scrollPos = window.document.documentElement.scrollLeft;     
    }     
    else if (typeof window.document.body != 'undefined') {     
       scrollPos = window.document.body.scrollLeft;     
    }     
    return scrollPos;    
}
/*end ScrollLeft*/

    </script>


html代码：
<div id="div" style="height: 150px;width: 180px;position: absolute;display: block; border-style: solid; border-width: 1px; background-color: #ffffff;">
			 <table cellspacing="0" cellpadding="0" border="0" width="100%">
			   <tr>
			     <td height="15px" style="background-color: #d0d7ec;text-align: right; color:white; padding-right: 5px;" >
			      <p onclick="closeMessage()" style="cursor: pointer; display: block;width:30px;"> 关闭</p>
			     </td>
			   </tr>
			   <tr>
			     <td height="30px" style="text-align: left;vertical-align: top; padding-top: 10px;" >
			      <p> <font color="red">有2条未读系统消息：</font><br/><br/>
			          <a href="#">1、您的电子证书已颁发。</a><br/>
			          <a href="#">2、您的关于“电子档案管理面授培训班”的问题已回复。</a>
			     </td>
			   </tr>
			 </table> 
			</div>