Question

I realize this question has been asked several times in several different forms, but I cannot get it to work properly for the life of me.

I have two DIVs on my page used for modals, ids signup-popup and login-popup. They each have their own close buttons with class simplemodal-close and showing/closing each one on its own works fine.

I want to add a button to the signup modal that closes it and opens the login modal. I followed the instructions Eric gave in the first link above, which I’ve included below:

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

However, this doesn’t work; the signup modal closes but the login modal doesn’t. Here is my code (using noConflict, hence the use of jQuery() rather than $()):

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

And I also tried the following instead, figuring it was simpler and more straightforward, however the result was the same (signup modal closes, login modal doesn’t close, regular close button & form submit works fine):

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

I did try Eric’s other suggestion which was to just replace the content of the modal. This works, but seems hack-y because I have to manually bind the close button (not a big deal) and the modal doesn’t auto-resize for the smaller login form. While this works, it seems like there should be a better way to do it (specifically the code I have right above, or some minor tweak to it).

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

Thanks to Andrey for answering this in another post!

The current onClose event acts like onBeforeClose and no onAfterClose for $.modal.close() is designed. The only workaround is to wait:

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

Here’s my working code:

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