Dialog: removed z-index manipulation and added .ui-front logic.

This is a basic implementation of the logic described by Scott Gonzalez
in this gist:

https://gist.github.com/3893326

--
.ui-front
	NEED EXAMPLES OF WHAT IS CURRENTLY BROKEN
		datepicker with z-index: 10000 & $( document ).tooltip()
		http://bugs.jqueryui.com/ticket/8655
		http://bugs.jqueryui.com/ticket/7884
	z-indexy elements will have class .ui-front
	.ui-front applies z-index: 100
	.ui-front element are always positioned by some other class (so that
z-index applies)
	z-indexy elements will have an appendTo option
		default null, which means walk up DOM from associated element
looking for .ui-front element
			e.g., autocomplete would walk up DOM from text field to find
which element to append the menu to
			if no .ui-front element is found, append to body
	dialog stacking?

Author: Nate Eagle

themes/base/jquery.ui.core.css

@@ -19,6 +19,8 @@
 .ui-helper-clearfix { zoom: 1; }
 .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
 
+.ui-front { z-index: 100; }
+
 
 /* Interaction Cues
 ----------------------------------*/

ui/jquery.ui.dialog.js

@@ -19,7 +19,7 @@
  */
 (function( $, undefined ) {
 
-var uiDialogClasses = "ui-dialog ui-widget ui-widget-content ui-corner-all ",
+var uiDialogClasses = "ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ",
 	sizeRelatedOptions = {
 		buttons: true,
 		height: true,
@@ -39,6 +39,7 @@ var uiDialogClasses = "ui-dialog ui-widget ui-widget-content ui-corner-all ",
 $.widget("ui.dialog", {
 	version: "@VERSION",
 	options: {
+		appendTo: null,
 		autoOpen: true,
 		buttons: {},
 		closeOnEscape: true,
@@ -89,12 +90,26 @@ $.widget("ui.dialog", {
 
 			title = options.title || " ",
 
+			// Figure out where to append the dialog
+			appendToTarget = function() {
+				if ( options.appendTo ) {
+					return $( options.appendTo );
+				} else {
+					var uiFront = that.element.closest(".ui-front");
+
+					if (uiFront.length) {
+						return uiFront;
+					} else {
+						return document.body;
+					}
+				}
+			},
+
 			uiDialog = ( this.uiDialog = $( "<div>" ) )
 				.addClass( uiDialogClasses + options.dialogClass )
 				.css({
 					display: "none",
-					outline: 0, // TODO: move to stylesheet
-					zIndex: options.zIndex
+					outline: 0 // TODO: move to stylesheet
 				})
 				// setting tabIndex makes the div focusable
 				.attr( "tabIndex", -1)
@@ -105,10 +120,7 @@ $.widget("ui.dialog", {
 						event.preventDefault();
 					}
 				})
-				.mousedown(function( event ) {
-					that.moveToTop( false, event );
-				})
-				.appendTo( "body" ),
+				.appendTo( appendToTarget() ),
 
 			uiDialogContent = this.element
 				.show()
@@ -257,62 +269,13 @@ $.widget("ui.dialog", {
 
 		$.ui.dialog.overlay.resize();
 
-		// adjust the maxZ to allow other modal dialogs to continue to work (see #4309)
-		if ( this.options.modal ) {
-			maxZ = 0;
-			$( ".ui-dialog" ).each(function() {
-				if ( this !== that.uiDialog[0] ) {
-					thisZ = $( this ).css( "z-index" );
-					if ( !isNaN( thisZ ) ) {
-						maxZ = Math.max( maxZ, thisZ );
-					}
-				}
-			});
-			$.ui.dialog.maxZ = maxZ;
-		}
-
 		return this;
 	},
 
 	isOpen: function() {
 		return this._isOpen;
 	},
 
-	// the force parameter allows us to move modal dialogs to their correct
-	// position on open
-	moveToTop: function( force, event ) {
-		var options = this.options,
-			saveScroll;
-
-		if ( ( options.modal && !force ) ||
-				( !options.stack && !options.modal ) ) {
-			return this._trigger( "focus", event );
-		}
-
-		if ( options.zIndex > $.ui.dialog.maxZ ) {
-			$.ui.dialog.maxZ = options.zIndex;
-		}
-		if ( this.overlay ) {
-			$.ui.dialog.maxZ += 1;
-			$.ui.dialog.overlay.maxZ = $.ui.dialog.maxZ;
-			this.overlay.$el.css( "z-index", $.ui.dialog.overlay.maxZ );
-		}
-
-		// Save and then restore scroll
-		// Opera 9.5+ resets when parent z-index is changed.
-		// http://bugs.jqueryui.com/ticket/3193
-		saveScroll = {
-			scrollTop: this.element.scrollTop(),
-			scrollLeft: this.element.scrollLeft()
-		};
-		$.ui.dialog.maxZ += 1;
-		this.uiDialog.css( "z-index", $.ui.dialog.maxZ );
-		this.element.attr( saveScroll );
-		this._trigger( "focus", event );
-
-		return this;
-	},
-
 	open: function() {
 		if ( this._isOpen ) {
 			return;
@@ -326,7 +289,6 @@ $.widget("ui.dialog", {
 		this._position( options.position );
 		uiDialog.show( options.show );
 		this.overlay = options.modal ? new $.ui.dialog.overlay( this ) : null;
-		this.moveToTop( true );
 
 		// set focus to the first tabbable element in the content area or the first button
 		// if there are no tabbable elements, set focus on the dialog itself
@@ -694,22 +656,10 @@ $.extend( $.ui.dialog.overlay, {
 		}
 	).join( " " ),
 	create: function( dialog ) {
+
 		if ( this.instances.length === 0 ) {
-			// prevent use of anchors and inputs
-			// we use a setTimeout in case the overlay is created from an
-			// event that we're going to be cancelling (see #2804)
-			setTimeout(function() {
-				// handle $(el).dialog().dialog('close') (see #4065)
-				if ( $.ui.dialog.overlay.instances.length ) {
-					$( document ).bind( $.ui.dialog.overlay.events, function( event ) {
-						// stop events if the z-index of the target is < the z-index of the overlay
-						// we cannot return true when we don't want to cancel the event (#3523)
-						if ( $( event.target ).zIndex() < $.ui.dialog.overlay.maxZ ) {
-							return false;
-						}
-					});
-				}
-			}, 1 );
+			// TODO: Do we need to write new logic to prevent use of anchors
+			// and inputs using the .ui-front system?
 
 			// handle window resize
 			$( window ).bind( "resize.dialog-overlay", $.ui.dialog.overlay.resize );
@@ -756,12 +706,6 @@ $.extend( $.ui.dialog.overlay, {
 		}
 
 		$el.height( 0 ).width( 0 ).remove();
-
-		// adjust the maxZ to allow other modal dialogs to continue to work (see #4309)
-		$.each( this.instances, function() {
-			maxZ = Math.max( maxZ, this.css( "z-index" ) );
-		});
-		this.maxZ = maxZ;
 	},
 
 	height: function() {