title: Custom close button for jQuery dialog?
body: <p>I am using jQuery daialog for showing the forms in an ASP.net application.    </p>
  
  <p><img src="https://i.stack.imgur.com/bLY2v.png" alt="Screenshot of application"></p>
  
  <p>Everything is working fine. I need to place a custom close button on each form so that when they click this button, I can save the record from code behind. I don't want to use the jQuery built in Exit button. The code for creating the dialog is below:</p>
  
  <pre><code>jQuery(function (e) {
              $("a").each(function () {
                  e.data(this, 'dialog',
                    $(this).next("div").dialog({
                        resizable: false,
                        autoOpen: false,
                        modal: false,
                        title: this.id,
                        width: 900,
                        height: 590,
  
                        position: ['middle', 150],
                        draggable: true,
  
                        open: function (event, ui) {
                            $(this).parent().children().children(".ui-dialog-titlebar-close").hide();
                        },
  
                        //buttons: {
                        //    "Exit": function () {                              
                        //        $(this).dialog("close");                              
                        //    }
                        //}
                    }));
  
              }).click(function (event) {
                  if (this.id != '#') {
                      document.getElementById('frame_' + this.id).src = this.id + '.aspx';
                      e.data(this, 'dialog').dialog('open');                    
                      return false;
                  }
              });        
  
          });
  </code></pre>
  
  <p>The code I use for closing the dialog :</p>
  
  <pre><code>  function CloseDialog()
      {
          $("#LabUsers").dialog('close');
      }
  </code></pre>
  
  <p>is not working.</p>
  
  <p>The entire code for parent page is below:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;
  
      &lt;/title&gt;
      &lt;script src="Scripts/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;link href="Scripts/themes/jquery-ui.css" rel="stylesheet" /&gt;
      &lt;link href="Scripts/themes/jquery-ui.min.css" rel="stylesheet" /&gt;
      &lt;link href="Scripts/themes/jquery.ui.theme.css" rel="stylesheet" /&gt;
      &lt;link href="Scripts/Site.css" rel="stylesheet" /&gt;
      &lt;link rel="stylesheet" href="Scripts/style.css" type="text/css" /&gt;
  
  
      &lt;script&gt;
  
  
          jQuery(function ($) {
              $("a").each(function () {
                  $.data(this, 'dialog',
                    $(this).next("div").dialog({
                        resizable: false,
                        autoOpen: false,
                        modal: false,
                        title: this.id,
                        width: 900,
                        height: 590,
  
                        position: ['middle', 150],
                        draggable: true,
                        open: function (event, ui) {
                            $(this).parent().children().children(".ui-dialog-titlebar-close").hide();
                        },
  
                       // buttons: {
                       //     "Exit": function () {
                       //         $(this).dialog("close");
                       //     }
                       // }
                    })
  
                  );
  
              }).click(function (event) {
                  if (this.id != '#') {
                      $.data(this, 'dialog').dialog('open');
                      document.getElementById('frame_' + this.id).src = this.id + '.aspx';
                      return false;
                  }
              });
          });
  
          $(document).ready(function () {
              $("iframe").attr("scrolling", "no");
              $("iframe").attr("frameborder", "0");
          });
  
  function CloseDialog(id)
      {
          $(id).dialog('close');
      }
  
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="center"&gt;
  
          &lt;div id="menu1" class="menu"&gt;
              &lt;ul id="nav"&gt;
                  &lt;li&gt;
                      &lt;a id="#"&gt;Log Samples&lt;/a&gt;
                      &lt;div id="#"&gt;&lt;iframe class="framestyle" id="frame_#"&gt;&lt;/iframe&gt; &lt;/div&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;a id="#"&gt;Commercial&lt;/a&gt;
                              &lt;div id="#"&gt;&lt;iframe class="framestyle" id="frame_#"&gt;&lt;/iframe&gt; &lt;/div&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;
                                      &lt;a id="LogSamples"&gt;Log Samples&lt;/a&gt;
                                      &lt;div id="LogSamples"&gt;&lt;iframe class="framestyle" id="frame_LogSamples"&gt;&lt;/iframe&gt; &lt;/div&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a id="Customers"&gt;Customers&lt;/a&gt;
                                      &lt;div id="Customers"&gt;&lt;iframe class="framestyle" id="frame_Customers"&gt;&lt;/iframe&gt; &lt;/div&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;li&gt;
                      &lt;a id="#"&gt;Admin&lt;/a&gt;
                      &lt;div id="#"&gt;&lt;iframe class="framestyle" id="frame_#"&gt;&lt;/iframe&gt; &lt;/div&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;a id="LabUsers"&gt;Lab Users&lt;/a&gt;
                              &lt;div id="LabUsers"&gt;&lt;iframe class="framestyle" id="frame_LabUsers"&gt;&lt;/iframe&gt; &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a id="LabRoles"&gt;Lab Roles&lt;/a&gt;
                              &lt;div id="LabRoles"&gt;&lt;iframe class="framestyle" id="frame_LabRoles"&gt;&lt;/iframe&gt; &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a id="ScreenForRoles"&gt;ScreenForRoles&lt;/a&gt;
                              &lt;div id="ScreenForRoles"&gt;&lt;iframe class="framestyle" id="frame_ScreenForRoles"&gt;&lt;/iframe&gt; &lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div id="header"&gt;
          &lt;div style="width: 100%;"&gt;
              &lt;div class="MainTitle" style="position: relative; float: right;"&gt;
                             &lt;/div&gt;
              &lt;div class="MainTitle" style="position: relative; float: left; vertical-align: central; line-height: 80px; margin-top: 25px;"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The code for the child form is below:</p>
  
  <pre><code>    &lt;%@ Page Title="About Us" Language="C#" AutoEventWireup="true" CodeBehind="LabRoles.aspx.cs" Inherits="Company.LabRoles" %&gt;
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head runat="server"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;script src="../View/Content/JScript/jquery-1.7.2.js"&gt;&lt;/script&gt;
      &lt;script src="../View/Content/JScript/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;link href="../View/Content/themes/jquery-ui.css" rel="stylesheet" /&gt;
      &lt;link href="../View/Content/Styles/Site.css" rel="stylesheet" /&gt;
      &lt;link href="../View/Content/themes/jquery.ui.theme.css" rel="stylesheet" /&gt; 
  
  
      &lt;script&gt;
  
          function CloseThisForm()
          {
              parent.CloseDialog("#LabRoles");
          }
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
          &lt;div style="height: 510px; margin: 16px;"&gt;
              &lt;div style="height: 450px; background: none;"&gt;
                  &lt;div style="text-align: left;"&gt;
                      &lt;asp:TextBox ID="txtSearch" runat="server" /&gt;
                      &lt;asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" CssClass="button" /&gt;
                      &lt;asp:HiddenField ID="hdnvalue" runat="server" ClientIDMode="Static" /&gt;
                  &lt;/div&gt;
                  &lt;br /&gt;
                  &lt;asp:GridView ID="gvRoles" runat="server" AutoGenerateColumns="False" BackColor="#d8e8ff" Width="100%"
                      RowStyle-Height="20" OnPageIndexChanging="gvRoles_PageIndexChanging" DataKeyNames="WM_RoleId"
                      EmptyDataText="There are no data records to display." OnRowDataBound="gvRoles_RowDataBound"
                      AllowPaging="true" ForeColor="Black"
                      OnSelectedIndexChanged="gvRoles_SelectedIndexChanged" PageSize="15"&gt;
  
                      &lt;Columns&gt;
                          &lt;asp:BoundField DataField="WM_RoleName" HeaderText="Role Name" HeaderStyle-HorizontalAlign="Center"
                              ItemStyle-HorizontalAlign="Left" ItemStyle-Width="100"&gt;
                              &lt;HeaderStyle HorizontalAlign="Left"&gt;&lt;/HeaderStyle&gt;
                          &lt;/asp:BoundField&gt;
                      &lt;/Columns&gt;
                  &lt;/asp:GridView&gt;
  
              &lt;/div&gt;
  
              &lt;div style="text-align: center; height: 20px;"&gt;
  
                  &lt;asp:Button ID="Button1" OnClientClick ="CloseThisForm(); return false;"  runat="server" Text="Close" /&gt;
                  &lt;asp:Button ID="btnInsert" runat="server" Text="Add New" CssClass="button" /&gt;
                  &lt;asp:Button ID="BtnDelete" runat="server" Text="Delete" CssClass="button" OnClientClick="return confirm('Do you want to delete this record? Click OK to proceed.');"
                      OnClick="BtnDelete_Click" /&gt;
                  &lt;asp:Button ID="btnEdit" runat="server" Text="Details" Visible="true"
                      CssClass="button" /&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>