From 55360eeb7eae5c560d51b09178e64d83c59223a6 Mon Sep 17 00:00:00 2001
From: David Sullivan <david.sullivan@gmail.com>
Date: Sat, 26 Jan 2013 04:03:14 -0600
Subject: [PATCH] Dialog: modified _createOverlay to _appendTo instead of
 document.body. Fixed #8984 - Modal dialogs display behind overlay when using
 appendTo option

---
 tests/unit/dialog/dialog_options.js | 42 +++++++++++++++++++++--------
 ui/jquery.ui.dialog.js              |  2 +-
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/tests/unit/dialog/dialog_options.js b/tests/unit/dialog/dialog_options.js
index a20480de6..5f0434308 100644
--- a/tests/unit/dialog/dialog_options.js
+++ b/tests/unit/dialog/dialog_options.js
@@ -6,43 +6,63 @@
 module("dialog: options");
 
 test( "appendTo", function() {
-	expect( 8 );
+	expect( 16 );
 	var detached = $( "<div>" ),
-		element = $( "#dialog1" ).dialog();
+		element = $( "#dialog1" ).dialog({
+			modal: true
+		});
 	equal( element.dialog( "widget" ).parent()[0], document.body, "defaults to body" );
+	equal( $( ".ui-widget-overlay" ).parent()[0], document.body, "overlay defaults to body" );
 	element.dialog( "destroy" );
 
 	element.dialog({
-		appendTo: ".wrap"
+		appendTo: ".wrap",
+		modal: true
 	});
 	equal( element.dialog( "widget" ).parent()[0], $( "#wrap1" )[0], "first found element" );
+	equal( $( ".ui-widget-overlay" ).parent()[0], $( "#wrap1" )[0], "overlay first found element" );
 	equal( $( "#wrap2 .ui-dialog" ).length, 0, "only appends to one element" );
+	equal( $( "#wrap2 .ui-widget-overlay" ).length, 0, "overlay only appends to one element" );
 	element.dialog( "destroy" );
 
 	element.dialog({
-		appendTo: null
+		appendTo: null,
+		modal: true
 	});
 	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" );
+	equal( $( ".ui-widget-overlay" ).parent()[0], document.body, "overlay null" );
 	element.dialog( "destroy" );
 
 	element.dialog({
-		appendTo: detached
+		autoOpen: false,
+		modal: true
+	}).dialog( "option", "appendTo", "#wrap1" ).dialog( "open" );
+	equal( element.dialog( "widget" ).parent()[0], $( "#wrap1" )[0], "modified after init" );
+	equal( $( ".ui-widget-overlay" ).parent()[0], $( "#wrap1" )[0], "overlay modified after init" );
+	element.dialog( "destroy" );
+
+	element.dialog({
+		appendTo: detached,
+		modal: true
 	});
 	equal( element.dialog( "widget" ).parent()[0], detached[0], "detached jQuery object" );
+	equal( detached.find( ".ui-widget-overlay" ).parent()[0], detached[0], "overlay detached jQuery object" );
 	element.dialog( "destroy" );
 
 	element.dialog({
-		appendTo: detached[0]
+		appendTo: detached[0],
+		modal: true
 	});
 	equal( element.dialog( "widget" ).parent()[0], detached[0], "detached DOM element" );
+	equal( detached.find( ".ui-widget-overlay" ).parent()[0], detached[0], "overlay detached DOM element" );
 	element.dialog( "destroy" );
 
-	element.dialog({ autoOpen: false }).dialog( "option", "appendTo", detached );
+	element.dialog({
+		autoOpen: false,
+		modal: true
+	}).dialog( "option", "appendTo", detached );
 	equal( element.dialog( "widget" ).parent()[0], detached[0], "detached DOM element via option()" );
+	equal( detached.find( ".ui-widget-overlay" ).length, 0, "overlay detached DOM element via option()" );
 	element.dialog( "destroy" );
 });
 
diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js
index 1d3a7a88f..ec4032ff3 100644
--- a/ui/jquery.ui.dialog.js
+++ b/ui/jquery.ui.dialog.js
@@ -695,7 +695,7 @@ $.widget( "ui.dialog", {
 
 		this.overlay = $("<div>")
 			.addClass("ui-widget-overlay ui-front")
-			.appendTo( this.document[0].body );
+			.appendTo( this._appendTo() );
 		this._on( this.overlay, {
 			mousedown: "_keepFocus"
 		});