javascript - 从用户控件内部关闭 jQuery 对话框

Question

我有一个用户控件，其中包含一个 ListView ，其中包含一个用于弹出 jQuery 对话框的超链接 (LnkDelete)。

这是完成这项工作的 javascript 代码

$('#LnkDelete').live('click', function (e) {
            var page = $(this).attr("href");
            var $dialog = $('<div></div>')
                .html('<iframe style="border: 0px;" src="' + page + '" width="100%" height="100%"></iframe>')
                .dialog({
                    autoOpen: false,
                    modal: true,
                    height: 200,
                    width: 600,
                    title: "Are you sure you want to delete ...?"
                });
            $dialog.dialog('open');
            e.preventDefault();
        });

这是将“DeleteBranch”Web 表单作为对话框打开的超链接:

<asp:HyperLink ID="LnkDelete" runat="server" NavigateUrl='<%# Eval("ID", "~/Personnel/DeleteBranch?Id={0}") %>' ClientIDMode="Static" CssClass="button-delete" />

“DeleteBranch”Web 表单包含一个带有“确定”和“取消”ASP 按钮的用户控件。“确定”按钮只是执行原始 ListView 中相关行的删除操作。

问题是:如何让“取消”按钮关闭弹出窗口？

Answer 1

    $('#LnkDelete').live('click', function (e) {
        var page = $(this).attr("href");
        var $dialog = $('<div></div>')
            .html('<iframe style="border: 0px;" src="' + page + '" width="100%" height="100%"></iframe>')
            .dialog({
                autoOpen: false,
                modal: true,
                height: 200,
                width: 600,
                title: "Are you sure you want to delete ...?",
                buttons: [
                {
                    text: 'OK',
                    click: function() { /*Your delete operation*/ }
                },
                {
                    text: "Cancel",
                    click: function() { $dialog.dialog('destroy'); }
                }
               ]
            });
        $dialog.dialog('open');
        e.preventDefault();
    });

正如您所说，如果是 ASP 按钮，请为该按钮指定一个 ID，例如 btn_cancel 并添加以下脚本:

<script lang='javascript'>
$(document).ready(function(){
    $('#btn_cancel').click(function(){
        $dialog.dialog('destroy');
    });
});
</script>