A jQuery Dialog is a very lightweight pop-up that can be customized in many ways. It is possible to have custom buttons in this pop-up. Here I shall demonstrate a very small piece of code that displays a jQuery dialog box on clicking a button.

Code

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript">></script>

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" type="text/javascript"></script>

<link href="main.css" rel="stylesheet" type="text/css" />

<title>jQuery Dialog</title>

<script type="text/javascript">

$(function () {

$("#dialog-confirm").hide();

$("#btnDelete").click(function () {

$("#dialog-confirm").dialog({

resizable: false,

height: 250,

width: 500,

modal: true,

buttons: {

"Delete Text": function () {

$("#content").hide();

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

},

Cancel: function () {

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

}

}

});

});

});

</script>

</head>

<body>

<form id="form1" runat="server">

<div id="dialog-confirm" title="Empty the recycle bin?">

<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>

</div>

<div id="content">

<p>jQuery Dialog Box in ASP.NET</p>

</div>

<input type="button" value="Delete" id="btnDelete" />

</form>

</body>

</html>

In this sample I have 2 divs.

The Div with id dialog-confirm holds the dialog text.

<div id="dialog-confirm" title="Empty the recycle bin?">

<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>

</div>

The Div with id content holds the content to be deleted when clicking the delete button.

<div id="content">

<p>jQuery Dialog Box in ASP.NET</p>

</div>

The dialog method in jQuery is used o trigger the custom pop-up.

<script type="text/javascript">

$(function () {

$("#dialog-confirm").hide();

$("#btnDelete").click(function () {

$("#dialog-confirm").dialog({

resizable: false,

height: 250,

width: 500,

modal: true,

buttons: {

"Delete Text": function () {

$("#content").hide();

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

},

Cancel: function () {

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

}

}

});

});

});

</script>

Output

Output

I hope you all enjoyed the jQuery Dialog Functionality.

For reference I have attached the sample source code.