fancy-box sub-box losing overlay when returning to main box

Question

I have a fancy-box with some buttons in it, when you click a button, it opens a new fancy-box, when you close that box it returns you to the original. however, when it returns to the original, the overlay dissappears! How can I prevent this from happening? I am using fancybox 1.3.4

Here is a sample which demonstrates the issue:

HTML

<div style=display:none>
    <div id=modal1>
        Modal 1<br />
        <input type=button href=#modal2 value=modal2 />
    </div>
    <div id=modal2>
        modal 2
    </div>
</div>
<input type=button href=#modal1 value=modal1 />

JS

$(document).ready(function () {
   $('input[href=#modal1]').fancybox();
    $('input[href=#modal2]').fancybox({
        onClosed:function() {
        setTimeout(function() {
        $.fancybox({href:'#modal1'});
    },0);
    }
    });
});

fiddle:http://jsfiddle.net/e27mgovv/ (Click modal1 button, then modal2 button, then close modal2)

The second modal is clearly destroying the overlay, however your required behaviour is unusual - triggering a modal from inside a modal, I would rather think of updating the content of the modal itself — Luca, Mar 13 '15 at 16:24
hmm, I suppose I could update the content by just shoving all the "sub-modals" into a single modal, and using jquery to toggle the divs, that seems like it would work — chiliNUT, Mar 13 '15 at 16:30
I'd do that - most modal plugins I've seen, check for the existence of the overlay before creating it - so you don't end up with multiple ones. The same way, they just remove the overlay when one modal is closed. — Luca, Mar 13 '15 at 16:33
I think you should take a look at this question: http://stackoverflow.com/questions/19305821/bootstrap-3-0-multiple-modals-overlay Maybe something similar can be done with fancy-box? — Albin, Mar 13 '15 at 16:40
@Luca when I close the sub modal, then it seems like it should close the overlay, and re-opening the top level modal should turn the overlay back on, perhaps because i am sort of "replacing" the main modal with the sub modal, the overlay gets lost, im going to try manually closing the main modal before triggering the sub — chiliNUT, Mar 13 '15 at 16:42
Well, this isn't exactly ideal, but I just created my own basic overlay, and control it via the start and close methods: http://jsfiddle.net/e27mgovv/38/ — Chad, Mar 13 '15 at 17:00
@Chad that looks great, I'll definitely consider that if I can't get it to work with its own overlay — chiliNUT, Mar 13 '15 at 17:11
@Luca my closing re-opening plan did not work, it never reopened the main modal. I used your initial suggestion of updating the content, but putting all the sub modals in the one fancybox, and toggling the display of each as needed. thanks! — chiliNUT, Mar 13 '15 at 17:37
Try increasing the time interval in the `setTimeout()` function ... I would say to `300` — JFK, Mar 13 '15 at 17:39
be careful when depending on a timeout, things could still be out of sync - callbacks or promises are a way more robust option! — Luca, Mar 16 '15 at 11:25

JFK · Accepted Answer · 2015-03-13T18:57:41.080

Well, here is the explanation of what is going on :

When you close fancybox, the overlay changes its CSS settings from display:block to display:none. This is triggered within the fancybox script by overlay.hide() when fancybox is closed.

NOTE: overlay.hide() is always triggered if you use an onClosed callback.

When you open a new fancybox within the onClosed callback, overlay.hide() is triggered but it doesn't seem to have time to change back to display:block with the new box, and this why you have to use the setTimeout() workaround.

However, bear in mind that if you open a new fancybox from a button (bound to fancybox) inside an opened fancybox (or navigating from one item to another in a fancybox gallery), fancybox will consider this as a transition and the overlay.hide() method will never be triggered. This is why the overlay remains visible when you click the href="#modal2" button inside of it.

If you don't want to use the setTimeout() workaround, mainly because the overlay flicks (closes/opens), you may .off() the fancybox close button and trigger a click on the href="#modal1" button to open the first fancybox back as a transition instead of onClosed. This way, the overlay.hide() method won't be triggered and the overlay will remain visible with smoother transition.

NOTE : this method will require to bind the fancybox close button back to its original functionality within the onComplete callback of the href="#modal1" initialization script like :

$(document).ready(function () {
    $('input[href=#modal1]').fancybox({
        onComplete: function () {
            $("#fancybox-close").off().on("click", function (event) {
                $.fancybox.close();
            })
        }
    });
    $('input[href=#modal2]').fancybox({
        onComplete: function () {
            $("#fancybox-close").off().on("click", function (event) {
                event.preventDefault();
                $('input[href=#modal1]').trigger("click");
            })
        }
    });
});

See your tweaked JSFIDDLE

NOTES :

.on() and .off() methods require jQuery v1.7+.
This solution is for fancybox v1.3.4.
If using inline content in fancybox v1.3.4, beware of this BUG and workaround

fancy-box sub-box losing overlay when returning to main box

1 Answers1