diff --git a/tests/visual/dialog/dialog_close_key_should_close_current.html b/tests/visual/dialog/dialog_close_key_should_close_current.html new file mode 100644 index 00000000000..39a9151a1db --- /dev/null +++ b/tests/visual/dialog/dialog_close_key_should_close_current.html @@ -0,0 +1,37 @@ + + + + + Dialog Visual Test : Modal Dialog in Large DOM + + + + + + + + + + + + + + +

Click this link

+ + +
+ Hi + Click Me +
Close Me with "Esc"
+
+ + + + diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js index 496118761d0..56c402081c8 100644 --- a/ui/jquery.ui.dialog.js +++ b/ui/jquery.ui.dialog.js @@ -94,7 +94,7 @@ $.widget("ui.dialog", { }) // setting tabIndex makes the div focusable .attr( "tabIndex", -1) - .keydown(function( event ) { + .bind( "keydown.dialog-overlay", function( event ) { if ( options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode && event.keyCode === $.ui.keyCode.ESCAPE ) { self.close( event ); @@ -191,7 +191,7 @@ $.widget("ui.dialog", { close: function( event ) { var self = this, - maxZ, thisZ; + maxZ, thisZ, top; if ( false === self._trigger( "beforeClose", event ) ) { return; @@ -223,9 +223,13 @@ $.widget("ui.dialog", { thisZ = $( this ).css( "z-index" ); if ( !isNaN( thisZ ) ) { maxZ = Math.max( maxZ, thisZ ); + top = $( this ); } } }); + if ( top && top.is( ":visible" ) ) { + top.trigger( "focus", event ); + } $.ui.dialog.maxZ = maxZ; } @@ -235,6 +239,28 @@ $.widget("ui.dialog", { isOpen: function() { return this._isOpen; }, + + isOnTop: function() { + var _isOnTop = false, + isAfter = false, + myZ; + if( this._isOpen ) { + myZ = $( this ).css( "z-index" ) + $( ".ui-dialog" ).each(function() { + if ( this !== that.uiDialog[0] ) { + var thisZ = $( this ).css( "z-index" ); + if ( !isNaN( thisZ ) && ( thisZ > myZ || ( isAfter && thisZ === myZ ) ) ) { + return false; + } + } + else { + isAfter = true; + } + _isOnTop = true; + }); + } + return _isOnTop; + }, // the force parameter allows us to move modal dialogs to their correct // position on open @@ -686,6 +712,7 @@ $.extend( $.ui.dialog.overlay, { } ).join( " " ), create: function( dialog ) { + var that = this; if ( this.instances.length === 0 ) { // prevent use of anchors and inputs // we use a setTimeout in case the overlay is created from an @@ -706,7 +733,7 @@ $.extend( $.ui.dialog.overlay, { // allow closing by pressing the escape key $( document ).bind( "keydown.dialog-overlay", function( event ) { if ( dialog.options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode && - event.keyCode === $.ui.keyCode.ESCAPE ) { + event.keyCode === $.ui.keyCode.ESCAPE && that.isOnTop() ) { dialog.close( event ); event.preventDefault();