仿MSN弹出框

现在基本功能都实现了.但现在在IE6下有个问题.就是当对话框从下往上移的时候IE判断会有问题.FF和IE8由于是固定定位
所以没问题.现在把代码放上来希望大伙帮看下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <style>
a{ text-decoration:none; border:0}
body,p,span,h1,h2,h3,h4,h5,h6,ul,li,table,tr,th,td,em,div,form,label{ margin:0; padding:0; font-size:12px; font-family:Arial;}
.message_layer_wrap{ width:195px; border:1px solid #a1ccfe; }
.message_layer_wrap .message_title{ height:22px; line-height:22px; margin:1px; background:#ebf4fc; color:#626262; }
.message_title_link{ cursor:hand; cursor:pointer;}
.message_layer_wrap .message_title .message_title_img{ float:left; padding:4px; line-height:18px;}
.message_layer_wrap .message_title p{ float:right; padding:5px; line-height:17px;}
.message_layer_wrap .message_title .message_news{ line-height:22px; float:left; margin:-1px 0 0 0; margin:1px 0 0 0\9;}
.message_layer_content{ background:url(http://www.cnblogs.com/images/cnblogs_com/jiayin2009/203894/o_message_bg01.gif) no-repeat; width:195px; height:77px;  border-top:1px solid #a1ccfe;}
.message_layer_content .message_left{ background:url(http://www.cnblogs.com/images/cnblogs_com/jiayin2009/203894/o_message_pic02.gif) no-repeat left 15px;margin:0 0 0 16px; width: 120px; padding:13px 0 0 21px; line-height:18px;}
.message_layer_content p{ text-align:center; line-height:18px; padding:7px 0 0 0;}
  </style>
 </head> <body>
 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<script type="text/javascript">
var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };var isIE = navigator.userAgent.indexOf('MSIE') != -1;var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == "6");var $d = (document.compatMode == "CSS1Compat") ? document.documentElement : document.body;var addEvent = function(otarget, stype, fnhandler){
otarget.attachEvent ? otarget.attachEvent("on"+stype, fnhandler) : otarget.addEventListener(stype, fnhandler, false);
}var CurrentStyle = function(element){
return element.currentStyle || element.ownerDocument.defaultVeiw(element, null);
}var Bind = function(object, fun){
var args = Array.prototype.slice.call(arguments).slice(2);
return function(){
return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
}
}var Extend = function(distination, source){
for(var property in source){
distination[property] = source[property];
}
return distination;
}var Class = {
create: function(){
return function(){
this.initialize.apply(this, arguments);
}
}
}
var ShortMsg = Class.create();
ShortMsg.prototype = {
initialize: function(msgbox, options){
this.MsgBox = $(msgbox);
this.SetOptions(options);
this._step = this.options.Step;
this._speed = this.options.Speed;
this._timer = null;
}, SetOptions: function(options){
this.options = {
Step: 2,
Speed: 50
};
Extend(this.options, options || {});
}, MoveMsgBox: function(){ // 主要是这个函数 在IE6下会有问题
var self = this;
this.ofsHeight = this.MsgBox.offsetHeight;
self.MsgBox.style.height = 0; // 初始化高度为0
self._timer = setInterval(function(){
if(parseInt(self.MsgBox.style.height ,10) < self.ofsHeight){
self.MsgBox.style.height = (parseInt(self.MsgBox.style.height, 10) + self._step) + "px"; //在这里追加高度同时减小top值.但在IE6下如果滚动条拖到最下面设置高度为0好像没有用...
self.MsgBox.style.top = (parseInt(self.MsgBox.style.top, 10) - self._step) + "px";
}else{
clearInterval(self._timer);
}
},self._speed)
}, ShowMsgBox: function(){
var iWidth = isIE6 ? ($d.scrollLeft + $d.clientWidth) : $d.clientWidth;
var iHeight = isIE6 ? ($d.scrollTop + $d.clientHeight) : $d.clientHeight;
this.MsgBox.style.left = (iWidth - this.MsgBox.offsetWidth) + "px";
this.MsgBox.style.top = (iHeight  - this.MsgBox.offsetHeight) + "px";
}, Init: function(){
this.MsgBox.style.left = ($d.scrollLeft + $d.clientWidth - this.MsgBox.offsetWidth) + "px";
this.MsgBox.style.top = ($d.scrollTop + $d.clientHeight) + "px";
this.MsgBox.style.position = !isIE6 ? "fixed" : "absolute";
if(isIE6){
addEvent(window, "scroll", Bind(this,this.ShowMsgBox));
}
this.MoveMsgBox();
addEvent(window, "resize", Bind(this, this.ShowMsgBox));
}
}
</script>
<!--wrap start-->
<div class="message_layer_wrap" id="msgbox" >
<!--title start-->
<div class="message_title">
     <div class="message_title_link">
         <div class="message_title_img"><img src="http://www.cnblogs.com/images/cnblogs_com/jiayin2009/203894/o_message_pic05.gif" /></div>
         <div class="message_news">新消息</div>
        </div>
        <p><a href="#"><img src="http://www.cnblogs.com/images/cnblogs_com/jiayin2009/203894/o_chahao.gif" /></a></p>
        <div class="clear"></div>
 </div>
 <!--title end-->
  <!--content start-->
<div class="message_layer_content">
    <div class="message_left">名爵750汽车火星订单</div>
        <p>当当-销售部</p>
    </div>
  <!--content end-->
</div>
<!--wrap end-->
<script type="text/javascript">
<!--
var SM = new ShortMsg('msgbox');
SM.Init();
//-->
</script>
 </body>
</html>

解决方案 »

  1.   

    IE判断会有问题?
    document.all
      

  2.   

    <html>
    <head>
    <title></title>
    </head><BODY><Script language="javascript">
    <!--
    window.onload = getMsg;
    window.onresize = resizeDiv;
    window.onerror = function(){}
    //短信提示使用(asilas添加)
    var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0;
    function getMsg()
    {
    try{
    divTop = parseInt(document.getElementById("eMeng").style.top,10)
    divLeft = parseInt(document.getElementById("eMeng").style.left,10)
    divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)
    divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)
    docWidth = document.body.clientWidth;
    docHeight = document.body.clientHeight;
    document.getElementById("eMeng").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;// divHeight
    document.getElementById("eMeng").style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth
    document.getElementById("eMeng").style.visibility="visible"
    objTimer = window.setInterval("moveDiv()",10)
    }
    catch(e){}
    }function resizeDiv()
    {
    i+=1
    if(i>1300) closeDiv() //客户想不用自动消失由用户来自己关闭所以屏蔽这句
    try{
    divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)
    divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)
    docWidth = document.body.clientWidth;
    docHeight = document.body.clientHeight;
    document.getElementById("eMeng").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10)
    document.getElementById("eMeng").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10)
    }
    catch(e){}
    }function moveDiv()
    {
    try
    {
    if(parseInt(document.getElementById("eMeng").style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))
    {
    window.clearInterval(objTimer)
    objTimer = window.setInterval("resizeDiv()",1)
    }
    divTop = parseInt(document.getElementById("eMeng").style.top,10)
    document.getElementById("eMeng").style.top = divTop - 1
    }
    catch(e){}
    }
    function closeDiv()
    {
    document.getElementById('eMeng').style.visibility='hidden';
    if(objTimer) window.clearInterval(objTimer)
    }
    -->
    </Script>
    <DIV id=eMeng style="BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX:99999; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: 180px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 116px; BACKGROUND-COLOR: #c9d3f3">
    <TABLE style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" cellSpacing=0 cellPadding=0 width="100%" bgColor=#AFDCF3 border=0>
    <TBODY>
    <TR bgColor=#6699cc>
    <TD style="font-size: 12px; background-image: url('images/msgTopBg.gif'); color: #0f2c8c" width=30 height=24></TD>
    <TD style="font-weight: normal; font-size: 12px; background-image: url('images/msgTopBg.gif'); color: #ffffff; padding-left: 4px; padding-top: 4px" vAlign=center width="100%"><font color="red">右下</font></TD>
    <TD style="background-image: url('images/msgTopBg.gif'); padding-right: 2px; padding-top: 2px" vAlign=center align=right width=19><span title=关闭 style="CURSOR: hand;color:white;font-size:12px;font-weight:bold;margin-right:4px;" onclick=closeDiv() >×</span></TD>
    </TR>
    <TR>
    <TD style="background-image: url('UploadFiles/200510822587734.jpg'); padding-right: 1px; padding-bottom: 1px" colSpan=3 height=90>
    <DIV style="BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 12px; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%">123<BR>
    <DIV align=center style="word-break:break-all"><a href="#" target="_blank">
    <font color=#FF0000>345</font></a></DIV>
    </DIV>
    </TD>
    </TR>
    </TBODY>
    </TABLE>
    </DIV>
    </BODY>
    </HTML>
    这是我以前用的过的，看看你能不能用上，IE6以上都支持。