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.