jquery - JQuery 的 Simplemodal : close currently visible modal and show another

Question

我意识到有人问了这个问题 several times在several different forms ，但我无法让它在我的一生中正常工作。

我的页面上有两个 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;
    });
});

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

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

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