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;
});
});
Best Answer
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:
Here's my working code: