類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>
<!-- 結束 更新彈出窗口 -->
作者:jillzhang
出處:http://jillzhang.cnblogs.com/
本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。
出處:http://jillzhang.cnblogs.com/
本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。

window.onerror 

浙公網安備 33010602011771號