call JS on JQuery popup close button 'X'

Question

I have a Jquery pop up:

    <script type="text/javascript">
     function showAccessDialog() {
        var modal_dialog = $("#modal_dialog");
         modal_dialog.dialog
         (
            {
             title: "Access Level",
             buttons: 
             {
             },
             modal: true,
             width:680,
            }
         ).parent().appendTo("form:first");
     };

     function closeAccessDialog() {
         var modal_dialog = $("#modal_dialog");
            modal_dialog.dialog('close');
     };
</script>

    <div id="modal_dialog" style="display: none; width:500"> 
       <asp:Panel ID="SelectGroupsPanel" runat="server" BackColor="Snow" Width="500"
           HorizontalAlign="Center">
           <asp:UpdatePanel runat="server" ID="SelectGroupsUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="false">
               <ContentTemplate>
                   <p style="color:red; text-align: left">Select groups from the drop downs</p>
                   <p style="text-align: left">
                       View Map
                       <br />
                       <asp:DropDownList ID="ddlViewMapGroupName" AppendDataBoundItems="true" runat="server">
                        <asp:ListItem Text="Select Group" Value="0" Selected="True"></asp:ListItem>
                       </asp:DropDownList>
                   </p>
                   <p style="text-align: left">
                       Edit Map
                       <br />
                       <asp:DropDownList ID="ddlEditMapGroupName" AppendDataBoundItems="true" runat="server">
                       <asp:ListItem Text="Select Group" Value="0" Selected="True"></asp:ListItem>
                       </asp:DropDownList>
                   </p>
                   <div class="buttonwrap">
                       <span id="Span5" class="ActionBtns">       
                       </span>
                   </div>
                   <br />
                   <br />
               </ContentTemplate>
               <Triggers>
                   <asp:AsyncPostBackTrigger ControlID="SaveAccess" EventName="Click" />
                    <asp:AsyncPostBackTrigger ControlID="ShareMapsBtn" EventName="Click" />
               </Triggers>
            </asp:UpdatePanel>   
            <asp:Button ID="SaveAccess" runat="server" Text="Update" OnClick="SaveAccess_Click" OnClientClick="uncheckAllCheckboxes()" style="text-align:center" />
       </asp:Panel>
   </div>

My Q being- When the user selects values from the drop down list and clicks 'UPDATE' button, calls 'OnClientClick="uncheckAllCheckboxes()"' which removes all the selected check boxes. - WORKING.

If the user presses the 'X' button on the top right of the pop up I also want to call 'uncheckAllCheckboxes()'

How can I do this?

Answer 1

The dialog of jQuery-UI has a close -function:

modal_dialog.dialog({
    title: "Access Level",
    buttons: {},
    modal: true,
    width: 680,
    close: function() {
        uncheckAllCheckboxes();
    }
});

Demo

Side-note: With the option closeOnEscape: true the close-function will also trigger if the user presses the escape -button.

Reference

dialog - close

Answer 2

$( ".selector" ).dialog({
  close: function( event, ui ) {
        //write your function here or call function here
  }
});

Document

Usefull link