Foundation - Opening a modal upon closing another modal

Question

I have a web page that opens a reveal modal on load, and in this modal, I have a link that can open a 2nd modal. When the 2nd modal closes (either by clicking the close button, or by clicking outside the modal), I would like to reopen the first.

For the close button, I can do it via adding a data-reveal-id to the link that has the close-reveal-modal class. But when I try to bind to the close property, the 1st modal opens, but then the background changes back to normal, and the 1st modal can no longer be closed by clicking outside the modal. Then, on closing the 1st modal with the close button, the whole screen darkens as though a modal was opening. Am I doing something wrong, or is this a bug?

My code is as follows:

$(function(){
    $("#modal2").foundation("reveal", {
        close: function() {
            $("#modal1").foundation("reveal", "open");
        }
    });

    $(document).foundation();
});

I did try using closed, but the only result was that modal2 would open then close almost immediately — Benedict Lee

Benedict Lee Benedict Lee · Accepted Answer · 2013-10-19T04:15:14

OK, so after some experimentation, I found out that in order to do what I wanted to I had to bind the function, not set it in the initialisation phase. Thus:

$("#modal2").bind("closed", function() {
    $("#modal1").foundation("reveal", "open");
  });

And I set this script after the declaration of the 2 modals.

Foundation - Opening a modal upon closing another modal

1 Answers