类MSN风格的弹出窗口的另类应用

 

做项目的时候，经常要考虑浏览器的问题，比如弹出窗口的问题，目前IE对于模式对话框要进行拦截，那么要想在一次操作中或者操作完成的时候弹出一个让人的醒目窗口该怎么办呢，我首先想到的就是模式对话框，考虑到被拦截的问题很快就否定了，之后看了一下cs2.0里面的浮动层的做法，感觉对于简单应用，显得过于复杂，最后发现使用类MSN或者QQ弹出窗口的方式，非常适合一些简单的应用，也能够为用户带来更多的感观上的享受，网上类似代码n多，我只是随便找了一个，这这些简单的代码和Ajax结合起来使用，效果可以说是非常好，用Ajax完成一个操作的时候，往往会给人一种惊慌的感觉，就是不习惯页面的不刷新，用户不知道自己的操作成功与否，这时候在操做完成之后，弹出一个这样的对话框，很是合适，类MSn弹出窗口的代码如下:

<!-- 开始 更新弹出窗口 -->
<script language="JavaScript"> 
//window.onload = initImg; 
window.onresize = resizeDiv; 
window.onerror = function(){} 
//短信提示使用(asilas添加) 
var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 1; 
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>750)
{closeDiv() ;i=0;
}
else
{
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:0; 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="#E7EFF7" border="0">
        <tbody>
            <tr>
                <td style="FONT-SIZE: 12px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #0f2c8c" width="30"
                    height="24"></td>
                <td width="100%" valign="center" style="FONT-WEIGHT: normal; FONT-SIZE: 14px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #0855AD; PADDING-TOP: 4px;PADDING-left: 4px">
                    <div align="center" id="title"></div>
                </td>
                <td style="BACKGROUND-IMAGE: url(msgTopBg.gif); PADDING-TOP: 2px;PADDING-right:2px"
                    valign="center" align="right" width="19"><span title="关闭" style="CURSOR: hand;color:#FF8A00;font-size:12px;font-weight:bold;margin-right:4px;"
                        onClick="closeDiv()">×</span>
                    <!-- <IMG title=关闭 style="CURSOR: hand" onclick=closeDiv() hspace=3 src="msgClose.jpg"> -->
                </td>
            </tr>
            <tr>
                <td style="PADDING-RIGHT: 1px; BACKGROUND-IMAGE: url(/oblog/1msgBottomBg.jpg); PADDING-BOTTOM: 1px"
                    colspan="3" height="90" align="center">
                    <div id="content" style="BORDER-RIGHT: #9C9E9C 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #9C9E9C 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 12px; PADDING-BOTTOM: 13px; BORDER-LEFT: #9C9E9C 1px solid; WIDTH: 95%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #9C9E9C 1px solid; HEIGHT: 100%;background-color:white"> 
                    
                    </div>
                </td>
            </tr>
            <tr>
                <td height="3" colspan="3"></td>
            </tr>
        </tbody>
    </table>
</div>
<!-- 结束 更新弹出窗口 -->