jquery关闭对话框

时间:2012-11-19 15:22:03

标签: jquery dialog

我想关闭一个jquery模式对话框,其中的按钮位于模态内的一个表单内...

$("#btnCancel").button().on('click', function (event) {
    event.preventDefault();
    $("#modalDlgWindow").dialog("close");
});

function loadDialog(tag, event, target) {
    event.preventDefault();
    event.stopPropagation();
    var $loading = $('<img src="../../Content/assets/images/nivo-loader.gif" alt="loading" class="ui-loading-icon">');
    var $url = $(tag).attr('href');
    var $title = $(tag).attr('title');
    $("#modalDlgWindow").empty();
    $("#modalDlgWindow")
        .append($loading)
        .load($url)
        .dialog({
            autoOpen: false
            , resizable: false
            , autoResize: true
            , title: $title
            , width: 'auto'
            , modal: false
            , height: 'auto'
            , show: 'fade'
            , position: [10, 50]
            , hide: 'fade'
        });
    $("#modalDlgWindow").dialog('open');
};

它适用于.fadeOut(500).empty(),所以我认为它也可以与.dialog('close')一起使用,但事实并非如此。有没有人能解决我的问题?

1 个答案:

答案 0 :(得分:1)

见这里:How to close jQuery Dialog within the dialog?

尝试:

 $("#modalDlgWindow").closest('.ui-dialog-content').dialog('close'); 

或者,您可以添加取消(和提交)按钮,如下所示:

function loadDialog(tag, event, target) {
    event.preventDefault();
    event.stopPropagation();
    var $loading = $('<img src="../../Content/assets/images/nivo-loader.gif" alt="loading" class="ui-loading-icon">');
    var $url = $(tag).attr('href');
    var $title = $(tag).attr('title');
    $("#modalDlgWindow").empty();
    $("#modalDlgWindow")
        .append($loading)
        .load($url)
        .dialog({
            autoOpen: false
            , resizable: false
            , autoResize: true
            , title: $title
            , width: 'auto'
            , modal: false
            , height: 'auto'
            , show: 'fade'
            , position: [10, 50]
            , hide: 'fade'
        });

        $("#modalDlgWindow").dialog("option", "buttons", {
                "Submit": function () {
                       // Get form values here

                       $.ajax({
                              type: 'POST',
                              //post form information here,
                              success: function (msg) {
                              if (msg.d) {
                                 $(this).dialog("close");                                    
                                }
                              },
                              error: function () {
                                 alert("Error! Try again...");
                              }
                       });
                    },
              "Cancel": function () {
                     $(this).dialog("close");
               }
            );
    $("#modalDlgWindow").dialog('open');
};