javascript自定义可连续调用,连续弹出的alert、confirm

     最近有个需求要改掉原来所有的alert窗口,改成一种自定义样式的窗口,找了下,关于alert,confirm重载的实现在网上有一大堆,但都有一个共同的缺点,就是无法连续调用,连续弹窗,也就是当需要连续弹出多个alert窗口时,它只会弹出一个alert窗口,且窗口内容是最后一次调用的alert方法的内容.这是因为重载后的的alert方法是非阻塞的,所以它会顺序执行,而不是等待用户点击按钮后才执行下面的代码.后来找了很久,都没能找到在javascript中造成阻塞的方法,于是就只能采用一个队列实现了这一功能.

      先说说使用方法,这里我定了一个msgBox的对象,这个对象对外只有一个方法,就是show()方法,通过调用这个show方法来实现弹窗的效果.

     /** 显示窗口的函数 txt : 窗体显示的文本内容 title : 窗体的标题,可选,默认标题为"提示" wndType : 窗口的类型,目前有提示窗口和确认窗口,msgBox内部定义了相关窗口类型的常量, 可选,默认为提示窗. okFunc : 确定按钮被按下时,调用的函数,可选. okParam1 : 确定按钮的回调函数的第一个参数, 可选. okParam2 : 确定按钮的回调函数的第二个参数, 可选. cancelFunc: 取消按钮按下时,调用的函数,可选. okParam1 : 取消按钮的回调函数的第一个参数, 可选. okParam2 : 取消按钮的回调函数的第二个参数, 可选. **/ msgBox.show( txt, title, wndType, okFunc, okParam1, okParam2, cancelFunc, cancelParam1, cancelParam2 ) /* ============== 实际用例 ==============*/ //普通的弹窗 msgBox.show( "你想要显示的内容" ); //标题为hello world的弹窗 msgBox.show( "你好!", "hello world" ); //背景被锁住的弹窗 msgBox.show( "点下背景看看!", "", msgBox.WND_LOCK_BG ); //确认框,点下确定提示Ok,取消提示cancel function okFunction() { alert( "Ok" ); } function cancelFunction() { alert( "cancel" ); } msgBox.show( "这是一个确认窗口","",msgBox.WND_CONFIRM | msgBox.WND_LOCK_BG, okFunction, null, null, cancelFunction ); //重载alert window.alert = function( txt ) { msgBox.show( txt, arguments[1],arguments[2],arguments[3],arguments[4],arguments[5],arguments[6],arguments[7],arguments[8] ); } //重载confirm 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] ); }

 

注意,该msgBox.show重载的alert和confirm方法并不能完全替代默认的lert和confirm,这是因为默认的alert和confirm是阻塞的,所以在代码的实现也会略有不同.如传统的confirm,使用方法是:

 

var flag = window.confirm( "你确定吗?" ); if(flag) { alert( "你点了确定" ); } else 　{ 　　 alert( "你点了取消" ); 　}

 

如果用该msgBox.show()重载的confirm方法来写就需要这样：

 

//这里假设我已经重载了confirm方法 window.confirm( "你确定吗?" , "", function(){ alert( "你点了确定" ); }, null, null, function(){ alert( "你点了取消" ); } );

 

      所以这里不建议大家直接重载alert和confirm,一方面是因为alert的阻塞性在调试方面能提供很多方便,另一方面,重载后,失去阻塞性的代码,可能会引起一部分已有的实现发生一些意外的错误.

 

       下面是实现代码和测试代码,csdn把部分字符做了转义和过滤,所以直接复制用不了,有空传个html文件上来供下载测试,咱没正经学过js,所以写的很难看.附带写了一个简单的展现窗口的函数,这个函数可以淡出窗口,或者实现窗口弹出的动画效果.

 

<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" οnblur="this.style.filter='alpha(opacity=80)';this.style.opacity='0.80';" οnfοcus="this.style.filter='alpha(opacity=100)';this.style.opacity='1';" οnclick="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>

 

 

 

 最后来张效果图: