Open Modal html in Iframe,, Collect Data, return to parent.
<head>
<script type="text/javascript"
src="http://www.schimsky.com/jquery/jquery-3.4.1.min.js"></script>
<script type="text/javascript"
src="http://www.schimsky.com/jquery/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<link type="text/css"
rel="Stylesheet"
href="http://www.schimsky.com/jquery/jquery-ui-1.12.1.custom/jquery-ui.min.css">
</head>
On Parent Page…
<input type="text"
id="txtData"
><br><br>
<button onclick="OpenPage('My
Page Title',525,700,'child.htm?id=' +
document.getElementById('txtData').value );return false;">Click
me</button>
<script type="text/javascript">
$( document ).ready(function() {
OpenPage('My Page Title',525,700,'child.htm');
});
//Scope through all
functions...
var
MyDialog
function
OpenPage(sTitle,iHeight,iWidth,PageName){
//***************************************************************************************************
$('head').append('<style
type="text/css">.ui-widget-overlay.ui-front {opacity:.75;
}</style>');
//***************************************************************************************************
MyDialog = $("<div></div>").html( "<iframe id='MyIFrame' style='border: 0px; '
src='" + PageName + "'
width='100%' height='100%'></iframe>" )
.dialog({
buttons: [{ text: "Close 1 (no save)", click: function() {$(this).dialog("close");}} , {text: "Close 2 (no save)", click: function() {$(this).dialog("close");} }],
autoOpen: false,
modal: true,
height: iHeight,
show: {effect:'slide',duration:1000},
hide: {effect:'explode',duration:1000},
width: iWidth,
title: sTitle,
beforeClose: function(event, ui){ alert('your
closing!') }
})
// Open
without the 'x' on the upper right of the window...
MyDialog.dialog('open').prev().find(".ui-dialog-titlebar-close").hide();;
} //OpenPage
Function
function
closeIframe(SomeData){
//******************************************************************************************
//This
function is called from the Child.htm page like this:
window.parent.closeIframe();
//******************************************************************************************
MyDialog.dialog('close');
alert(SomeData);
document.getElementById('txtData').value = SomeData;
return
false;
}
</script>
On Child Page…
<head>
</head>
This is my Child Page <br><br>
Last name: <input type="text" id='lname' name="lname"><br>
<button onclick="SaveAndClose()">Save And Close</button>
<script>
var
urlParams = new
URLSearchParams(location.search);
var x =
urlParams.get('id');
document.getElementById("lname").value = x;
function
SaveAndClose(){
var
SomeData = document.getElementById("lname").value;
window.parent.closeIframe(SomeData); // this function can be found on the Parent.html
}
</script>