ghost
commented
8 years ago If anyone's interested, the reason was I was fullscreening a div inside the body called ".wrap", by default Remodal appends it's HTML to the body (outside of my .wrap div) which was causing the z-index stacking issue.
My solution was to change the first line of the Remodal function to append to my div instead of document.body. Might be an idea to create an option for "appendToElement" or something that allows you to drop it somewhere other than the document.body?
When using fullscreen API, the z-index is too low (only tested in Firefox) so that the overlay and the wrapper both sit underneath the "fullscreened" element.
I have manually adjusted the z-index, this works in Firefox:
.remodal-overlay { z-index: 9999999998; }
.remodal-wrapper { z-index: 9999999999; }
But I think that is outside the typical z-index scope that is causing problems in other browsers.