Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment