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

Question

我意识到这个问题已经被问过多次 在几种不同的形式中，但我无法让它在生命周期中正常工作我。

我的页面上有两个 DIV 用于模态、ids 注册弹出窗口和登录弹出窗口。他们每个人都有自己的关闭按钮，类为 simplemodal-close ，并且单独显示/关闭每个按钮都可以正常工作。

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

$('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;
    });
});

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

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;
    });
});

Answer 1

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

当前的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;
  });
});

Answer 2

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

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

我在这里提出了一个问题，看看我们是否可以找到返回同步 close() 的方法。