<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 the
button to open the InputBox…
<div>
<!-- This DropDownList is here for the sole purpose of getting the __doPostback function -->
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" BackColor="#CC0066" > </asp:DropDownList>
<!-- The cmdInputBox's Click Event Code Behind will run from the __doPostback function in the javascript:closefunction -->
<asp:Button ID="cmdInputBox" OnClientClick="InputBox('dvInputBox','Enter Something','500','200');return false" runat="server" Text="Show Input Box" />
</div>
Step 2: Here’s the div that IS our InputBox…
<!-- Here's our InputBox... -->
<div id="dvInputBox" style="display:none;background-color:lightblue">
<asp:Label ID="Label1" runat="server" Text="Enter your last name:"></asp:Label> <asp:TextBox runat="server" id="txtNameLast"></asp:TextBox>
</div>
Step 3:
Here’s the InputBox function… Add: open:
setTimeout(function
() { $("#" + dvID).dialog("close");
}, 2000), to make it a MessageBox
function InputBox(dvID,sTitle,sWidth,sHeight) {
// ***************
// NO close 'x'
// ***************
//**********************************
// if you want to add the overlay...
//***************************************************************************************************
$('head').append('<style type="text/css">.ui-widget-overlay.ui-front {opacity:.75; }</style>');
//***************************************************************************************************
$("#" + dvID).dialog({
title: sTitle,
buttons: [{ text: "Save", click: function () { $(this).dialog("close"); CloseFunction(); } }, { text: "Cancel", click: function () { $(this).dialog("close"); } }],
closeOnEscape: false,
modal: true,
show: "slideDown",
hide: 'slideUp',
width: sWidth,
height: sHeight,
appendTo: '#form1'
}).prev().find(".ui-dialog-titlebar-close").hide();
} // End of InputBox Function
Step 4: Here’s the CloseFunction that calls the __doPostBack
code behind…
function CloseFunction() {
__doPostBack('cmdInputbox', "")
} //End CloseFunction