Overlays hidden behind other elements: using native dialogs / popovers to prevent stacking context issues

[blutorange]

ElFinder places all overlays inside the ElFinder container. When elFinder is used in a page where there are already other stacking contexts (e.g. something like this), just using z-index won't work and the overlays will appear below other elements

This is an issue that used to be hard to solve. Some time ago, the top layer was introduced to HTML, which makes it easy to move elements from anywhere inside the DOM to the top. The fullscreen feature of ElFinder already uses the top layer implicitly.

I made a test where I use native dialog elements and popovers (if the browser supports it) for overlays. This solves the issue in our case, all ElFinder overlays are now properly visible.

Here's what I've got for now. I'm sure there are some things to improve. But I wanted to ask, what do you think of this approach in general?

master...blutorange:elFinder:feat-native-modal-popover-for-overlays