Jquery UI 关闭对话框并打开新对话框答案

【问题标题】：Jquery UI Close Dialog & Open New DialogJquery UI 关闭对话框并打开新对话框
【发布时间】：2011-04-19 14:45:28
【问题描述】：

这个概念看起来很简单，但我在执行它时遇到了很多问题。

我需要关闭当前对话框并打开另一个。它会关闭#imageModal，但不会打开#uploadModal。

有什么建议吗？

编辑：添加了#uploadModal

$("#imageModal").dialog({
    autoOpen: false,
    height: 500,
    width: 500,
    modal: true,
    closeOnEscape: true,
    resizable: false,
    buttons: {
        'Upload Image': function() {
            // CLOSE 1 DIALOG AND OPEN ANOTHER
            $(this).dialog('close');
            $('#uploadModal').dialog('open');

        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    close: function() {
        $(this).dialog('close');
    }
});


$("#uploadModal").dialog({
    autoOpen: false,
    height: 500,
    width: 500,
    modal: true,
    closeOnEscape: true,
    resizable: false,
    buttons: {
        'Upload Image': function() {


        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    close: function() {
        $(this).dialog('close');
    }
});

【问题讨论】：

我们能看到#uploadModal 的HTML/JS 吗？ :) 另外，请确保 $(this) 不是您单击的按钮，而是当您调用 .dialog('close') 事件时对话框本身...
@pixelbobby 添加了#uploadModal html 和 $(this).dialog('close') 工作正常，它只是不打开#uploadModal，谢谢！
谢谢。查看您的代码，下面的 Christian 建议似乎可行。如果是这种情况，请确保将其标记为答案:)
@Laxman13 感谢您的建议，仍在学习stackoverflow的技巧。

标签： jquery jquery-ui dialog

【解决方案1】：

使用对话框完成任务时执行的回调函数。

[...]
'Upload Image': function() {
                // CLOSE 1 DIALOG AND OPEN ANOTHER
                $(this).dialog('close', function() {
                     $('#uploadModal').dialog('open');
                });

}, 
[...]

【讨论】：

感谢您的建议，但解决方案无效。它关闭了当前对话框，但没有打开#uploadModal。我用一个简单的 alert("TEST");它也没有工作。
它在调试控制台中说了什么吗？另一件事，你有没有声明 $(document).ready(function() { ... });在所有这些说明之前？
是的，我声明了 $(function() { ... });在一切之前。 #imageModal 完美地打开和关闭，但在关闭时没有打开 #uploadModal，我在调试器日志中没有与此相关的错误。
我真的不明白为什么这不起作用。我已经在 jsFiddle 中对其进行了测试，它的反应与我的生产环境相同。
这种方式不能绑定到close事件...你必须使用bind方法... $(this).bind("dialogClose", function ()...跨度>

【解决方案2】：

嗯，你改变了关闭和打开的顺序吗？比方说，先打开下一个对话框，然后关闭第一个？

1 - 这个；

// CLOSE 1 DIALOG AND OPEN ANOTHER
   $(this).dialog('close');
   $('#uploadModal').dialog('open');

2 - 收件人：

// CLOSE 1 DIALOG AND OPEN ANOTHER
   $('#uploadModal').dialog('open');
   $(this).dialog('close');

【讨论】：

【解决方案3】：

$(this).dialog('close');
$('#uploadModal').dialog('open');

这对我来说实际上很好用（jquery 1.7 jquery-ui 1.8）。建议的答案只会关闭对话框，不会打开新的对话框。

【讨论】：

【解决方案4】：

尝试将您的“uploadModal”打开调用包装在 setTimeout 中。

'Upload Image': function() { 
    // CLOSE 1 DIALOG AND OPEN ANOTHER 
    $(this).dialog('close'); 
    setTimeout(function () {
        $('#uploadModal').dialog('open');
    }, 100);
},

您也可以通过...绑定到对话框的关闭事件。

$("#uploadImage").bind("dialogClose", function () {
    // code goes here
});

但我认为第一个可以满足您的需求。

【讨论】：

【解决方案5】：

是的，这已经有一段时间了。我正在寻找如何解决同样的问题。我发布了更多代码然后需要，所以你可以看到发生了什么。我使用当前对话框的名称来关闭和打开新对话框的名称。工作...

//============= User Modal ===============================//

$( "#dialog-message" ).dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    width: 650,
    buttons: {
        Add: function() {
            $('#dialog-message').dialog( "close" );
            $('#dialog-message3').dialog( "open" );
        }
    }
});

$( "#opener" ).click(function() {
    $( "#dialog-message" ).dialog( "open" );
    return false;
}); 

//========== Add User Modal ============================ // 
$( "#dialog-message3" ).dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    width: 250,
    buttons: {
        Save: function() {
            $( '#dialog-message3' ).dialog( "close" );
        }
    }
});

【讨论】：