一个接一个地打开 jQuery UI 对话框

Question

我有多个 jQuery UI 对话框，我想一个接一个地显示（一个关闭，下一个打开）。目前，它们都显示模态，但后面的一个更大，在我看来它看起来很糟糕/令人困惑。

我通常会打开下一个对话框的关闭函数，但这些对话框是从单独的函数中调用的，并且它们是动态的，因为并非所有对话框都始终根据特定标准显示。

我正在考虑一种使用 $.Deferred 的方法，但我不确定这是否可行，因为我的理解是它更适用于 AJAX 调用之类的事情。

这是一个（非常）简化的示例，说明如何按原样构造代码。

<script>
function displayAlert1(){
    $('<div/>', {text: 'Alert 1!'}).dialog({
        modal: true,
        autoOpen: true,
        width: 400,
        buttons: { OK: function(event, ui){ $(this).dialog('close'); } }
    });
}
function displayAlert2(){
    $('<div />', {text: 'Alert 2!'}).dialog({
        modal: true,
        autoOpen: true,
        width: 200,
        buttons: { OK: function(event, ui){ $(this).dialog('close'); } }
    });
}

$(function(){
    // These are actually met from data passed by AJAX
    var condition1 = true;
    var condition2 = true;
    $('a').live('click', function(event, ui){
        if(condition1) displayAlert1();
        if(condition2) displayAlert2();
    }
});
</script>

<!-- The links are actually dynamically produced from AJAX, thus the live() event handler -->
<a>Click Me!</a>

jsFiddle

我的想法是，也许我可以让每个警报函数返回对对话框元素的引用，或 $.Deferred 对象，但我不确定如何从主执行部分实现链接（检查条件和函数被调用）。

我还想确保它链接到下一个对话框，无论它关闭之前的对话框如何；无论是通过 X、'close' 方法还是 'destroy' 方法。

感谢您的任何意见。

Answer 1

想了想，想出了使用堆叠队列的简化方法。我想我可以使用$.Deferred 对象，但它会稍微复杂一点，而且它本质上最终会是一个堆栈。

下面是我的代码。我基本上初始化了一个数组以用作我的堆栈，并且我将让每个函数将对话框元素推入堆栈。我绑定到所有未来对话框的关闭事件，并让它打开队列中的下一个。

有一些明显的优化要做，但这是我想要的准系统。

function displayAlert1(){
    return $('<div/>', {'class': 'alerts', text: 'Alert 1!'}).dialog({
        modal: true,
        autoOpen: false,
        width: 400,
        buttons: { OK: function(event, ui){ $(this).dialog('close'); } }
    });
}
function displayAlert2(){
    return $('<div/>', {'class': 'alerts', text: 'Alert 2!'}).dialog({
        modal: true,
        autoOpen: false,
        width: 200,
        buttons: { OK: function(event, ui){ $(this).dialog('close'); } }
    });
}

$(function(){
    // These are actually met from data passed by AJAX
    condition1 = true;
    condition2 = true;

    // Dialog stack
    dialogs = [];

    $('a').live('click', function(event, ui){
        if(condition1) dialogs.push(displayAlert1());
        if(condition2) dialogs.push(displayAlert2());

        // Grab the next dialog in queue
        d = dialogs.shift();
        // Check if it is valid, and open it
        if(d && d.dialog){
            d.dialog('open');
        }
    });

    $('.alerts').live('dialogclose', function(event, ui){
        // Grab the next dialog in queue
        d = dialogs.shift();
        // Check if it is valid, and open it
        if(d && d.dialog){
            d.dialog('open');
        }
        // Return false, or the close button (X) will glitch and re-create dialogs
        return false;
    });
});

jsFiddle

Answer 2

您可以使用 2 件事来实现此目的：

1) 每个对话框都有一个标识符（您可以将其作为 'id' 属性添加到 div 上）

2) 收听对话框上的“关闭”事件 (http://api.jqueryui.com/dialog/)

因此，在“关闭”处理程序上，您可以检查当前状态，并根据该状态打开/关闭其他对话框。

当前状态是：当前打开了哪些对话框，以及您用于条件 1、条件 2 等的其他参数。

http://jsbin.com/iwovob/1/