Popup: Correctly enhance popup and its contents before opening

This is a better fix than the one provided in the original PR for this, because
it avoids the use of .enhanceWithin(), and it moves the image width/height
retrieval to popupbeforeposition, which is correct, because during creation the
popup is truncated to 1px x 1px.

Closes gh-7290
Fixes gh-7336

Author: Gabriel Schulhof

demos/popup-dynamic/index.php

@@ -22,22 +22,27 @@
 					closebtn = '<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>',
 					header = '<div data-role="header"><h2>' + brand + ' ' + model + '</h2></div>',
 					img = '<img src="../_assets/img/' + short + '.jpg" alt="' + brand + '" class="photo">',
-					popup = '<div data-role="popup" id="popup-' + short + '" data-short="' + short +'" data-theme="none" data-overlay-theme="a" data-corners="false" data-tolerance="15">' + closebtn + header + img + '</div>';
+					popup = '<div data-role="popup" id="popup-' + short + '" data-short="' + short +'" data-theme="none" data-overlay-theme="a" data-corners="false" data-tolerance="15"></div>';
+
+				// Create the popup.
+				$( header )
+					.appendTo( $( popup )
+						.appendTo( $.mobile.activePage )
+						.popup() )
+					.toolbar()
+					.before( closebtn )
+					.after( img );
 
-				// Create the popup. Trigger "pagecreate" instead of "create" because currently the framework doesn't bind the enhancement of toolbars to the "create" event (js/widgets/page.sections.js).
-				$.mobile.activePage.append( popup ).trigger( "pagecreate" );
 				// Wait with opening the popup until the popup image has been loaded in the DOM.
 				// This ensures the popup gets the correct size and position
 				$( ".photo", "#popup-" + short ).load(function() {
-					var height = $( this ).height(),
-						width = $( this ).width();
-					// Set height and width attribute of the image
-					$( this ).attr({ "height": height, "width": width });
 					// Open the popup
 					$( "#popup-" + short ).popup( "open" );
+
 					// Clear the fallback
 					clearTimeout( fallback );
 				});
+
 				// Fallback in case the browser doesn't fire a load event
 				var fallback = setTimeout(function() {
 					$( "#popup-" + short ).popup( "open" );
@@ -46,6 +51,13 @@
 
 			// Set a max-height to make large images shrink to fit the screen.
 			$( document ).on( "popupbeforeposition", ".ui-popup", function() {
+				var image = $( this ).children( "img" ),
+					height = image.height(),
+					width = image.width();
+
+				// Set height and width attribute of the image
+				$( this ).attr({ "height": height, "width": width });
+
 				// 68px: 2 * 15px for top/bottom tolerance, 38px for the header.
 				var maxHeight = $( window ).height() - 68 + "px";