用于 JQuery 的 Simplemodal：关闭当前可见的模式并显示另一个

Posted 2023-05-08

【中文标题】用于 JQuery 的 Simplemodal：关闭当前可见的模式并显示另一个

【英文标题】：Simplemodal for JQuery: close currently visible modal and show another

【发布时间】：2011-05-12 20:41:14

【问题描述】：

我知道在several different forms 中已向several times 提出过这个问题，但我无法让它在我的一生中正常工作。

我的页面上有两个用于模态的 DIV，ids signup-popup 和 login-popup。他们每个人都有自己的关闭按钮，类 simplemodal-close 并显示/关闭每个按钮都可以正常工作。

我想在注册模式中添加一个按钮来关闭它并打开登录模式。我按照 Eric 在上面第一个链接中给出的说明进行操作，我已将其包含在下面：

$('a#ask').click(function()
    $('#modal-contact').modal(onShow: function (dialog) 
        // handle the close yourself.
        // Don't use the closeClass on this element
        // call $.modal.close(); when you are done
        // call a function to open a new modal
    );
    return false;
);

但是，这不起作用；注册模式关闭，但登录模式没有。这是我的代码（使用 noConflict，因此使用 jQuery() 而不是 $()）：

jQuery(function (jQuery) 
    jQuery('#btn-signup-open').click(function () 
        jQuery('#signup-popup').modal(onShow: function (dialog) 
            jQuery('#login-from-signup').click(function () 
                jQuery.modal.close();
                jQuery('#login-popup').modal();
            )
        );
        return false;
    );
);

我也尝试了以下方法，认为它更简单直接，但结果是一样的（注册模式关闭，登录模式没有关闭，常规关闭按钮和表单提交工作正常）：

jQuery(function (jQuery) 
    jQuery('#login-from-signup').click(function () 
        jQuery.modal.close();
        jQuery('#login-popup').modal();
        return false;
    );
);

我确实尝试了 Eric 的其他建议，即仅替换模态的内容。这行得通，但似乎很笨拙，因为我必须手动绑定关闭按钮（不是什么大问题），并且模式不会为较小的登录表单自动调整大小。虽然这可行，但似乎应该有更好的方法来做到这一点（特别是我上面的代码，或者对其进行一些小的调整）。

jQuery(function (jQuery) 
    jQuery('#login-from-signup').click(function () 
        jQuery('.simplemodal-wrap').html('<div class="popup simplemodal-data" id="login-popup" style="display: block;">'+jQuery("#login-popup").html()+'</div>');
        jQuery('.simplemodal-close').click(function() jQuery.modal.close(); return false;);
          return false;
    );
);

【参考方案1】：

感谢 Andrey 在另一篇文章中回答这个问题！

当前的 onClose 事件的行为类似于 onBeforeClose 并且没有为 $.modal.close() 设计 onAfterClose。唯一的解决方法是等待：

$.modal.close(); window.setTimeout(showSecondModal, 500);

这是我的工作代码：

jQuery(function (jQuery) 
  jQuery('#login-from-signup').click(function () 
    jQuery.modal.close();
    window.setTimeout(function() jQuery('#login-popup').modal(), 250);
    return false;
  );
);

【参考方案2】：

这绝对是一种解决方法，但这意味着您的代码现在也是异步的。我认为这很遗憾，因为一旦你开始异步，你就不能回到同步，任何使用你的函数的代码也必须开始使用setTimeout()。这可能并不总是很重要，但我认为它使代码库难以进行单元测试。

这种行为实际上是simplemodal 版本1.4.1 中的新行为。如果你切换回1.3.5关闭和打开可以按顺序完成，没有任何问题。

我提出了一个问题over here，看看我们是否可以找到一种方法来恢复同步close()。

【讨论】：

感谢您提交问题。我会尽快调查。

希望得到修复。我最终也使用了这个 setTimeout 解决方法，尽管这显然是一个非常糟糕的情况。我认为结果是因为 1.4.1 在内部使用 setTimeout 来关闭对话框，所以没有办法解决它。