Dialog: Added appendTo option. Fixes #7948 - Dialog: Allow dialog to be attached to a element other than body.

scottgonzalez · scottgonzalez · commit 70b16ef445d8 · 2012-12-07T14:54:21.000-05:00
diff --git a/tests/unit/dialog/dialog.html b/tests/unit/dialog/dialog.html
@@ -61,6 +61,8 @@ <h2 id="qunit-userAgent"></h2>
 			<label for="favorite-food">Favorite food</label><input id="favorite-food">
 		</div>
 	</div>
+	<div class="wrap" id="wrap1"></div>
+	<div class="wrap" id="wrap2"></div>
 </div>
 </body>
 </html>
diff --git a/tests/unit/dialog/dialog_common.js b/tests/unit/dialog/dialog_common.js
@@ -1,5 +1,6 @@
 TestHelpers.commonWidgetTests( "dialog", {
 	defaults: {
+		appendTo: "body",
 		autoOpen: true,
 		buttons: {},
 		closeOnEscape: true,
diff --git a/tests/unit/dialog/dialog_options.js b/tests/unit/dialog/dialog_options.js
@@ -5,6 +5,47 @@
 
 module("dialog: options");
 
+test( "appendTo", function() {
+	expect( 8 );
+	var detached = $( "<div>" ),
+		element = $( "#dialog1" ).dialog();
+	equal( element.dialog( "widget" ).parent()[0], document.body, "defaults to body" );
+	element.dialog( "destroy" );
+
+	element.dialog({
+		appendTo: ".wrap"
+	});
+	equal( element.dialog( "widget" ).parent()[0], $( "#wrap1" )[0], "first found element" );
+	equal( $( "#wrap2 .ui-dialog" ).length, 0, "only appends to one element" );
+	element.dialog( "destroy" );
+
+	element.dialog({
+		appendTo: null
+	});
+	equal( element.dialog( "widget" ).parent()[0], document.body, "null" );
+	element.dialog( "destroy" );
+
+	element.dialog({ autoOpen: false }).dialog( "option", "appendTo", "#wrap1" ).dialog( "open" );
+	equal( element.dialog( "widget" ).parent()[0], $( "#wrap1" )[0], "modified after init" );
+	element.dialog( "destroy" );
+
+	element.dialog({
+		appendTo: detached
+	});
+	equal( element.dialog( "widget" ).parent()[0], detached[0], "detached jQuery object" );
+	element.dialog( "destroy" );
+
+	element.dialog({
+		appendTo: detached[0]
+	});
+	equal( element.dialog( "widget" ).parent()[0], detached[0], "detached DOM element" );
+	element.dialog( "destroy" );
+
+	element.dialog({ autoOpen: false }).dialog( "option", "appendTo", detached );
+	equal( element.dialog( "widget" ).parent()[0], detached[0], "detached DOM element via option()" );
+	element.dialog( "destroy" );
+});
+
 test("autoOpen", function() {
 	expect(2);
 
diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js
@@ -39,6 +39,7 @@ var uiDialogClasses = "ui-dialog ui-widget ui-widget-content ui-corner-all ui-fr
 $.widget("ui.dialog", {
 	version: "@VERSION",
 	options: {
+		appendTo: "body",
 		autoOpen: true,
 		buttons: {},
 		closeOnEscape: true,
@@ -124,6 +125,14 @@ $.widget("ui.dialog", {
 		}
 	},
 
+	_appendTo: function() {
+		var element = this.options.appendTo;
+		if ( element && (element.jquery || element.nodeType) ) {
+			return $( element );
+		}
+		return this.document.find( element || "body" ).eq( 0 );
+	},
+
 	_destroy: function() {
 		var next,
 			oldPosition = this.oldPosition;
@@ -276,7 +285,7 @@ $.widget("ui.dialog", {
 				tabIndex: -1,
 				role: "dialog"
 			})
-			.appendTo( this.document[ 0 ].body );
+			.appendTo( this._appendTo() );
 
 		this._on( this.uiDialog, {
 			keydown: function( event ) {
@@ -569,6 +578,10 @@ $.widget("ui.dialog", {
 
 		this._super( key, value );
 
+		if ( key === "appendTo" ) {
+			this.uiDialog.appendTo( this._appendTo() );
+		}
+
 		if ( key === "buttons" ) {
 			this._createButtons();
 		}
