Modal opens behind fullscreen pages.

[jowilhnson]

I am in the process of replacing standard alert and confirm dialog boxes with modals because they look so much nicer. I've run into a problem where if the page is in fullscreen, unlike confirm and alert dialogs, the modal does not open over the page, instead it appears behind it and is not visible until the user hits Esc to exit fullscreen.

My current workaround is to add code to exit fullscreen before showing the modal, but this isn't perfect and if there's a way to make the modal open over the fullscreen page, that would be much better.

I tried setting the z-index on .modal and .modal-open classes to 1100, but that didn't effect anything.
Any tips would be appreciated.

[PeppeL-G]

You used theElement.requestFullscreen() to enter fullscreen? Then I guess the browser will only show theElement and its children, and that becomes a problem since Modal.show('templateName') will insert the modal into document.body.

Well, I guess the problem is nailed down, but I don't have a good solution for it at the moment. I guess passing an optional parent element to Modal.show (and use document.body as default) is one way to go, but if anyone has any other idea I'm listening.

[jowilhnson]

That makes sense. I am requesting fullscreen on an element that is a child of document.body. For now I'll keep using my workaround of exiting fullscreen to display the modal, but will keep thinking about a better solution now that I understand what's happening better. Thanks for explaining that.