Asp.Net Tutorial - Creating dialog boxes using jQuery

Dialog boxes are an important mode of interaction with the end user. They are used to deliver information, error, warning, or confirmation messages to the end user.

jQuery UI provides a dialog widget as an alternative to the traditional JavaScript pop-up windows. In this article, let's see how to use jQuery UI dialog widget to display a basic confirmation dialog box.

Create a new web form DialogBoxDemo.aspx in the current project.

Add an ASP.NET panel on the form with the required confirmation message as follows:

<asp:Panel ID="dialogbox" ToolTip="Confirmation" runat="server">
Are you sure you want to continue?
</asp:Panel>

Add a button control to the form to trigger the dialog box on the click event.

Thus, the complete aspx markup of the web form is as follows:

<form id="form1" runat="server">
<div align="center">
<asp:Panel ID="dialogbox" ToolTip="Confirmation"
runat="server">
Are you sure you want to continue?
</asp:Panel>
<asp:Button ID="btnOpen" runat="server" Text="Click to open the
dialog box" />
</div>
</form>

Now, let's use jQuery UI to set the properties of the dialog box.

Set the buttons property to an array containing OK and Cancel buttons. Also define the desired action on the click event of the respective buttons. For the purpose of this demo, we have defined .dialog("Close") as the custom action for both the buttons:

buttons: {
"OK" : function(){
$(this).dialog("close");
},
"Cancel" : function(){
$(this).dialog("close");
}
}
});

Complete jQuery

<script language="javascript" type="text/javascript">
$(document).ready(function(){
$( "#dialogbox" ).dialog({
autoOpen: false,
modal:true,
resizable:false,
buttons: {
"OK" : function(){
$(this).dialog("close");
},
"Cancel" : function(){
$(this).dialog("close");
}
}
});
$( "#btnOpen" ).click(function() {
$( "#dialogbox" ).dialog( "open" );
return false;
});
});
</script>