JQuery Modal Form Dialog
Source Project can be found here: D:\Data\VBSource\DialogBasics

<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">

Step 1. Create a div that is your Form

<div id="MyDialog" title="Delete confirmation">

Enter your name

<br />

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<br />

<br />

Heres some content from an iFrame. This iFrame has a textbox on it with the id of: txtIFrameTextBox <br />

<iframe src="iframewebform.aspx" id="frmMyIFrame" frameborder="1" scrolling="auto" onload=""></iframe>

</div>

Step 2. Create a button to show the dialog based on the div

   <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="$('#MyDialog').dialog('open');return false;" />

Step 3. JQuery Create a .dialog referencing your div and performing a __doPostBack

<script>

$('#MyDialog').dialog({

resizable: false,

height: 500,

width: 600,

autoOpen: false,

closeOnEscape: false,

show: "slide",

hide: "slide",

modal: true,

buttons: {

"Enter": function() {

//*******************************************************************************

//This is how you get content from the iFrame...

var iframe = document.getElementById("frmMyIFrame");

alert(iframe.contentWindow.document.getElementById("txtIFrameTextBox").value);

//*******************************************************************************

var s = document.getElementById('TextBox1').value.trim();

if (s.length == 0) {

alert('You gotta enter something'); return false;

}

//Fun Fact: Using: Page.ClientScript.GetPostBackEventReference(New Web.UI.PostBackOptions(Me.Page))

//on the page_load to ensure __doPostBack is created

__doPostBack("NameEntered", document.getElementById('TextBox1').value)

$(this).dialog("close");

}, //Enter

Cancel: function() {

$(this).dialog("close");

} //cancel

}//buttons

}).prev().find('.ui-dialog-titlebar-close').hide(); //dialog hide the close icon.

// *********************************************

// Called from iFrame page, like this...

// asp:Button ID="cmdClose" runat="server" Text="Close From IFrame" OnClientClick="window.parent.closeIframe();"

// *********************************************

function closeIframe() {

$('#MyDialog').dialog('close');

return false;

}

// *********************************************

</script>

Step 4. The Code Behind To Handle the __doPostBack

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

'********************************************************************************

'This code will create the __DoPostback function on the client side page

Page.ClientScript.GetPostBackEventReference(New Web.UI.PostBackOptions(Me.Page))

'********************************************************************************

If Page.IsPostBack Then

Dim requestTarget = Me.Request("__EVENTTARGET")

Dim requestArgs = Me.Request("__EVENTARGUMENT")

If requestTarget = "NameEntered" Then

Response.Write("Hello " & requestArgs)

End If

End If

End Sub