How to embed and iframe with form in a jQueryMobile popup.
I noticed there is an issue with closing popup once form in iframe is submitted.
The issue is because jQueryMobile is depending on ‘window.history.back();’ for closing popups if $.mobile.ajaxEnabled is true.

Below sample is a solution for that.

jqm_popup_iframe_form.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>jQueryMobile popup and iframe form</title> 
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
 <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
  <style> 
  </style>
 <script>
   function myOpenPopup() {
 		runtimePopup("<iframe src='jqm_popup_form.html' width='0' height='0' " +
			"style='border: 0px; margin: 0px; padding: 0px;'></iframe>", closePopUp);
 	}

	function closePopUp() {
		$(".messagePopup").popup("close");
	}
	
	function runtimePopup(markup, popupafterclose) {
		var template = "<div data-role='popup' class='messagePopup'><span> " + markup + " </span> </div>";

 		popupafterclose = popupafterclose ? popupafterclose : function () { };

 		$.mobile.ajaxEnabled = false;
 		$.mobile.activePage.append(template).trigger("create");

 		$.mobile.activePage.find(".messagePopup").on({ 
 			popupbeforeposition: function () {
 				var size = scale(497, 298, 15, 1),
                w = size.width,
                h = size.height;

 				$(this).find("iframe")
                .attr("width", w)
                .attr("height", h);
 			},
 			popupafterclose: function () {
 				$(this).find("iframe")
                .attr("width", 0)
                .attr("height", 0);
 			}
 		});
		 

 		$.mobile.activePage.find(".messagePopup").popup().popup("open").bind({
 			popupafterclose: function () {
 				$(this).unbind("popupafterclose").remove();
 				popupafterclose(); 
 				$.mobile.ajaxEnabled = true;
 			}  
 		});
 	}


 	function scale(width, height, padding, border) {
 		var scrWidth = $(window).width() - 30,
			scrHeight = $(window).height() - 30,
			ifrPadding = 2 * padding,
			ifrBorder = 2 * border,
			ifrWidth = width + ifrPadding + ifrBorder,
			ifrHeight = height + ifrPadding + ifrBorder,
			h, w;

 		if (ifrWidth < scrWidth && ifrHeight < scrHeight) {
 			w = ifrWidth;
 			h = ifrHeight;
 		} else if ((ifrWidth / scrWidth) > (ifrHeight / scrHeight)) {
 			w = scrWidth;
 			h = (scrWidth / ifrWidth) * ifrHeight;
 		} else {
 			h = scrHeight;
 			w = (scrHeight / ifrHeight) * ifrWidth;
 		}

 		return {
 			'width': w - (ifrPadding + ifrBorder),
 			'height': h - (ifrPadding + ifrBorder)
 		};
 	};


 </script> 
</head>
<body>
<div data-role="page" id="firstPage">
    <div data-role="content"> 
		<input value="Login" data-theme="b" type="button" onclick="myOpenPopup();" />
	</div>
 </div> 
</body>
</html>

jqm_popup_form.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" /> 
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
 <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  
 <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script> 
</head>
<body>
<div data-role="page" id="firstPage">
  <div data-role="content">
		<form action="jqm_popup_form.html" method="get" class="ui-body ui-body-a ui-corner-all">
			<div>
				<h3>Please sign in</h3>
				<label for="un" class="ui-hidden-accessible">Username:</label>
				<input type="text" name="user" id="un" value="" placeholder="username" data-theme="a"/>
				<label for="pw" class="ui-hidden-accessible">Password:</label>
				<input type="password" name="pass" id="pw" value="" placeholder="password" data-theme="a"/>
				<button type="submit" data-theme="b">Sign in</button>
				<button type="button" data-theme="b" onclick="parent.closePopUp()">Cancel</button>
			</div>
		</form>
	</div>
</div>
</body>
</html>

A Demo can be seen here