<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %>
<!DOCTYPE html>
<head runat="server">
<title></title>
<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>
<body>
<form id="form1" runat="server">
<div>
<!-- Link to open the Form... ********************************************************* -->
<asp:LinkButton ID="LinkButton1" runat="server" onclientclick="ToggleForm('dvMyForm');return false;">Open the Form...</asp:LinkButton>
<!-- Link to open the Form... ********************************************************* -->
<br />
<br />
<asp:Button ID="cmdSubmit" runat="server" Text="submit" />
</div>
<!-- Setup Your Form ************************************************************** -->
<div id="dvMyForm" style="display:none; background-color: lightblue;">
<label for="fname">First name:</label><br/>
<input type="text" id="txtfname" name="txtfname" runat="server" /><br/>
<label for="lname">Last name:</label><br/>
<input type="text" id="txtlname" name="txtlname" runat="server"/><br/><br/>
</div>
<!-- Setup Your Form ************************************************************** -->
</form>
</body>
<script>
function ToggleForm(sFormId) {
// ***************
// NO close 'x'
// ***************
//**********************************
// if you want to add the overlay...
//***************************************************************************************************
$('head').append('<style type="text/css">.ui-widget-overlay.ui-front {opacity:.75; }</style>');
//***************************************************************************************************
$("#" + sFormId).dialog({
title: "my title!",
buttons: [{ text: "Close 1", click: function () { $(this).dialog("close"); } }, { text: "Close 2", click: function () { $(this).dialog("close"); } }],
close: CloseFunction,
closeOnEscape: false,
modal: true,
show: 'fade',
hide: 'fade',
width: 600,
height: 600,
appendTo: '#form1'
}).prev().find(".ui-dialog-titlebar-close").hide();
} // End of ToggleForm Function
function CloseFunction() {
alert('you closed it');
}
</script>