Jquery simplemodal close existing modal and open a

Question

Alright, so all modals already have an image at the top right to close them. How can I make additionally another anchor to do the same thing? I thought I could use the "closeClass" option which default to "simplemodal-close" and just add that class to an anchor, but it didn't have the desired effect. Is that what I'm supposed to do? Also, all modals will have a "contact us" link which should close it's own modal and open the contact modal. How can I wait until it is closed to open the next one?

Ideas?

$('a#ask').click(function(){
        $.modal.close(function(){
        });
        $('#modal-contact').modal();
    });

Answer 1

Upgrade to the latest version of SimpleModal, currently 1.4.4. The timeout issue was fixed in 1.4.2 according to http://www.ericmmartin.com/simplemodal-1-4-3-released/:

Removed opera work-around for close() that was causing issues

Your code above, with a slight modification, should then work as expected:

$('a#ask').click(function(){
    $.modal.close();
    $('#modal-contact').modal();
});

Answer 2

To answer the second question -- how to close an existing modal and subsequently open a new one -- you need to do three things:

1. Add Persist: true to the callback option of the first modal.According to Eric Martin's website, "If true, the data will be maintained across modal calls, if false, the data will be reverted to its original state."
2. Add the onClose callback to the first modal.
3. Close the first modal BEFORE running the function to open the second modal.

So, when you close the modal with $.modal.close(), the onClose will run, thus triggering the animations and closing the modal. Since persist is true, the following function will be retained. Your function will fire, and your second modal will open.

$("#first_modal").modal({
     containerId: 'modal_id',
     persist: true,
     onClose: function (dialog) {
     dialog.container.fadeOut(100, function () {
        dialog.overlay.fadeOut(200, function(){
            $.modal.close();
            showSecondModal();      
        });
   });

} });

Answer 3

1) If you assign simplemodal-close to an element that is in the dialog content, SimpleModal will automatically bind the close function to click event for that element.

2) There are a number of ways you could do this, either by swapping out the content or first closing the dialog with $.modal.close(); then opening a new one.

UPDATE

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

Answer 4

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