最近有個需求要改掉原來所有的alert窗口,改成一種自定義樣式的窗口,找了下,關於alert,confirm重載的實現在網上有一大堆,但都有一個共同的缺點,就是無法連續調用,連續彈窗,也就是當需要連續彈出多個alert窗口時,它只會彈出一個alert窗口,且窗口內容是最後一次調用的alert方法的內容.這是因爲重載後的的alert方法是非阻塞的,所以它會順序執行,而不是等待用戶點擊按鈕後才執行下面的代碼.後來找了很久,都沒能找到在javascript中造成阻塞的方法,於是就只能採用一個隊列實現了這一功能.
先說說使用方法,這裏我定了一個msgBox的對象,這個對象對外只有一個方法,就是show()方法,通過調用這個show方法來實現彈窗的效果.
注意,該msgBox.show重載的alert和confirm方法並不能完全替代默認的lert和confirm,這是因爲默認的alert和confirm是阻塞的,所以在代碼的實現也會略有不同.如傳統的confirm,使用方法是:
如果用該msgBox.show()重載的confirm方法來寫就需要這樣：
所以這裏不建議大家直接重載alert和confirm,一方面是因爲alert的阻塞性在調試方面能提供很多方便,另一方面,重載後,失去阻塞性的代碼,可能會引起一部分已有的實現發生一些意外的錯誤.
下面是實現代碼和測試代碼,csdn把部分字符做了轉義和過濾,所以直接複製用不了,有空傳個html文件上來供下載測試,咱沒正經學過js,所以寫的很難看.附帶寫了一個簡單的展現窗口的函數,這個函數可以淡出窗口,或者實現窗口彈出的動畫效果.
<textarea cols="50" rows="15" name="code" class="xhtml"><mce:script type="text/javascript"><!-- var $ = function( objId ) { return document.getElementById( objId ); }; //提示框對象 window.msgBox = new function() { this.WND_ALERT = 1; //提示框 this.WND_CONFIRM = 2; //確認框 this.WND_LOCK_BG = 4; //彈窗時鎖住背景 this.SIZE_WIDTH = 320; this.SIZE_HEIGHT = 240; //彈出窗口的方法 this.show = function( txt, title, wndType, okFunc, okParam1, okParam2, cancelFunc, cancelParam1, cancelParam2 ) { var node = null; var isTail = false; //彈窗隊列,如果隊列裏沒有待彈的窗口,則彈窗,否則加入彈窗隊尾. if( !this.head ) { this.head = new Object(); node = this.head; this.tail = this.head; } else { this.tail.nextNode = new Object(); node = this.tail.nextNode; isTail = true; this.tail = this.tail.nextNode; } node.txt = txt; if( title && title.length > 0 ) { node.title = title; } else { node.title = "提示"; } if( okFunc ) { node.okFunc = okFunc; node.okParam1 = okParam1; node.okParam2 = okParam2; } node.ok = function() { $( 'msgBox' ).style.display = "none"; $( 'msgBoxCancelBtn' ).style.display = "none"; $( 'msgBoxContent' ).innerHTML = ""; if( this.lockBg ) { this.lockBg.style.display = "none"; } if( this.head.okFunc ) { this.head.okFunc( this.head.okParam1, okParam2 ); } this.head = this.head.nextNode; this.ok = null; this.cancel = null; showWnd(); } if( cancelFunc ) { node.cancelFunc = cancelFunc; node.cancelParam1 = cancelParam1; node.cancelParam2 = cancelParam2; } node.cancel = function() { $( 'msgBox' ).style.display = "none"; $( 'msgBoxCancelBtn' ).style.display = "none"; $( 'msgBoxContent' ).innerHTML = ""; if( this.lockBg ) { this.lockBg.style.display = "none"; } if( this.head.cancelFunc ) { this.head.cancelFunc( this.head.cancelParam1, this.head.cancelParam2 ); } this.head = this.head.nextNode; this.ok = null; this.cancel = null; showWnd(); } if( wndType ) { node.wndType = wndType; } if( isTail ) { return; } showWnd(); } var that = this; //設置指向當前對象(msgBox)的指針 //私有方法,用於實際展示窗口內容 var showWnd = function() { if( !that.head ) { return; } var mainWnd = $( 'msgBox' ); $( 'msgBoxContent' ).innerHTML = that.head.txt; $( 'msgBoxTitle' ).innerHTML = that.head.title; if( that.head.wndType && ( that.head.wndType & that.WND_CONFIRM ) != 0 ) { $( 'msgBoxCancelBtn' ).style.display = ""; } //鎖住背景 if( ( that.head.wndType & that.WND_LOCK_BG ) != 0 ) { if( !that.lockBg ) { that.lockBg = document.createElement("div"); that.lockBg.style.cssText = "position:absolute;visibility:visible;left: 0px;top:0px;background-color:#000;filter: alpha(opacity=50);opacity:0.5"; that.lockBg.style.zIndex = 9998; that.lockBg.style.width = document.body.clientWidth + "px"; that.lockBg.style.height = document.body.clientHeight +"px"; that.lockBg.onfocus = function(){ setTimeout( function(){ mainWnd.focus();}, 10 ); }; var parentObj = top.document.body; parentObj.appendChild( that.lockBg ); } that.lockBg.style.display = ""; } mainWnd.style.display = ""; var maxWidth = that.SIZE_WIDTH; var maxHeight = that.SIZE_HEIGHT; mainWnd.style.position = "absolute"; mainWnd.style.left = ( ( document.body.clientWidth - maxWidth ) / 2 + document.body.scrollLeft ) ; mainWnd.style.top = ( ( document.body.clientHeight - maxHeight ) / 2 + document.body.scrollTop ) ; mainWnd.style.width = 0 + "px"; mainWnd.style.height= 0 + "px"; mainWnd.style.opacity = 0; mainWnd.style.filter = 'alpha(opacity=0)'; showWndAnim( mainWnd, 0, 0, maxWidth, maxHeight, 100, 100, 10 ); that.ok = that.head.ok; that.cancel = that.head.cancel; } } //窗口動畫 function showWndAnim( elem, ow, oh, w, h, oop, lop, time ) { var dw = w - ow; var dh = h - oh; var dop = lop - oop; var width = ow + dw / time; var height = oh + dh / time; var opacity = oop + dop / time; width = width > w ? w : width; height = height > h ? h : height; opacity = opacity > lop ? lop : opacity; elem.style.width = width+"px"; elem.style.height = height+"px"; elem.style.opacity = opacity/100; elem.style.filter = 'alpha(opacity='+opacity+')'; if( time - 1 > 0 ) { setTimeout( function(){ showWndAnim( elem, width, height, w, h, opacity, lop, time - 1 ); }, 10 ); } } window.alert = function( txt ) { msgBox.show( txt, arguments[1],arguments[2],arguments[3],arguments[4],arguments[5],arguments[6],arguments[7],arguments[8] ); } window.confirm = function( txt ) { msgBox.show( txt,arguments[1], msgBox.WND_CONFIRM | msgBox.WND_LOCK_BG, arguments[2],arguments[3],arguments[4],arguments[5],arguments[6],arguments[7] ); } /*==================== Test =====================*/ function testOk() { alert( "you pressed ok button! " ); } function testCancel() { alert( "you pressed cancel button! " ); } // --></mce:script> <html> <mce:style type="text/css"><!-- .STYLE1 { color: #FFFFFF; font-weight: bold; } --></mce:style><style type="text/css" mce_bogus="1">.STYLE1 { color: #FFFFFF; font-weight: bold; }</style> </style> <body> <div style="z-index:9999;background-color:#993300;border:solid #CCCCCC 1px;display:none" mce_style="z-index:9999;background-color:#993300;border:solid #CCCCCC 1px;display:none" id="msgBox" onblur="this.style.filter='alpha(opacity=80)';this.style.opacity='0.80';" onfocus="this.style.filter='alpha(opacity=100)';this.style.opacity='1';" onclick="this.focus();" > <table border="0" cellpadding="0" cellspacing="1" width="100%" height="100%"> <tr height="5%"> <td valign="top"><table width="100%" height="100%" border="0" cellpadding="3" cellspacing="1" > <tr> <td align="center" id="msgBoxTitle" class="STYLE1"> </td> </tr> </table></td> </tr> <tr height="90%"> <td valign="top" width="100%"><table border="0" align="center" cellpadding="0" cellspacing="1" width="100%" height="100%" > <tr> <td class="lefttbg3" id="msgBoxContent" style="backGround-color:#FFFF99" mce_style="backGround-color:#FFFF99" align="center"> </td> </tr> </table></td> </tr> <tr height="5%"> <td valign="top"><table border="0" align="center" cellpadding="0" cellspacing="1" width="100%" height="100%"> <tr> <td><div style="cursor:pointer; display:block;" mce_style="cursor:pointer; display:block;" onMouseOver="this.style.backgroundColor='#3366CC';this.style.color='#F3DB85';" onMouseOut="this.style.backgroundColor='';" onClick="msgBox.ok();"> <table border="1" cellspacing="1" cellpadding="2" width="100%"> <tr> <td align="center" ><span class="STYLE1">確定</span></td> </tr> </table> </div></td> <td id="msgBoxCancelBtn" style ="display:none;"><div style="cursor:pointer; display:block;;" mce_style="cursor:pointer; display:block;;" onMouseOver="this.style.backgroundColor='#3366CC';this.style.color='#F3DB85';" onMouseOut="this.style.backgroundColor='';" onClick="msgBox.cancel()"> <table border="1" cellspacing="1" cellpadding="2" width="100%" > <tr> <td align="center"><span class="STYLE1">取消</span></td> </tr> </table> </div></td> </tr> </table></td> </tr> </table> </div> <a href="javascript:alert('我是alert','',msgBox.WND_LOCK_BG);" mce_href="javascript:alert('我是alert','',msgBox.WND_LOCK_BG);"> 彈出1個Alert</a> <a href="javascript:alert('我是alert1','',msgBox.WND_LOCK_BG);alert('我是alert2','',msgBox.WND_LOCK_BG);alert('我是alert3','',msgBox.WND_LOCK_BG);" mce_href="javascript:alert('我是alert1','',msgBox.WND_LOCK_BG);alert('我是alert2','',msgBox.WND_LOCK_BG);alert('我是alert3','',msgBox.WND_LOCK_BG);"> 連續彈出3個Alert</a> <a href="javascript:confirm('這個是confirm窗口', '', testOk, null,null, testCancel,null,null);" mce_href="javascript:confirm('這個是confirm窗口', '', testOk, null,null, testCancel,null,null);"> 彈出帶Confirm窗口</a> </body> </html></textarea>
最後來張效果圖:
