javascript - 在JQuery弹出关闭按钮上调用JS 'X'

Question

我有一个 Jquery 弹出窗口:

    <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>

我的问题是 - 当用户从下拉列表中选择值并单击“更新”按钮时，调用“OnClientClick =“uncheckAllCheckboxes()””，这将删除所有选定的复选框。 - 工作。

如果用户按下弹出窗口右上角的“X”按钮，我还想调用“uncheckAllCheckboxes()”

我该怎么做？

Answer 1

jQuery-UI 的对话框有一个关闭功能:

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

Demo

旁注:使用选项 closeOnEscape: true，如果用户按下 escape 按钮，关闭功能也会触发。

引用

dialog - close