jQuery Dialog in ASP.Net

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.