Question

I am attempting to display a Fancybox 2 dialog over a full screen Galleria gallery. Here are the z-indexes I set:

.galleria-container notouch fullscreen {
    z-index: 10000;  /* default by component */
}

.fancybox-overlay {
    z-index:100001;
}
.fancybox-opened {
    z-index: 100030;
}
.fancybox-close {
    z-index: 100040;
}

I have played around with setting the width and height of the fancybox div to display but only get a display of about 20px and then it disappears. Is there a javascript API call that I missed? Thanks.

EDIT: here is the link – http://cdn1.doneupsalon.com/test.html.

Answer 1

This is what you are missing : . … a dot (YES, a dot … three, actually 😉

You have this in your document :

<style type="text/css">
    fancybox-overlay {
        z-index:100001;
    }
    fancybox-opened {
        z-index:100030;
    }
    fancybox-close {
        z-index:100040;
    }
</style>

Your posted code is right but not your working code in your demo page.

Actually, if you set the z-index to the .fancybox-overlay selector it would be good enough.