Im working on this project for work atm where an e-learning will be played on the samsung galaxy tab. the game is just a website but will be showed as app.
When you log in for the first time you will see a popup with this welcome message, behind it is a black overlay with transparancy.
The problem is that on the PC while on firefox it all works great but on the tablet the Z-index doesnt seem to work. its impossible to debug and I couldnt find any documentation on this issue. So does anyone know if z-index works differently on the tablet or how do I fix it?
The pop up has z-index 999 and the overlay is z-index 998, Any ideas on this? I will continue my search on google and will post all the progress I make.
Edit: The overlay will be created in Jquery: var showPopup = '<%=ViewData("showPopup").toString()%>'
if (showPopup == "True") { $('body').prepend('<div class="overlay"></div>'); $('#welcomeBox').show(); }
Solved now, see comment for solution.
Found the answer, the answer was partially on stackoverflow can be found here: Android Webkit: Absolutely positioned elements don't respect z-index
The rest was found in an tutorial.
The solution was the following:
I added the overlay in jQuery but the pop up was in the html but just hidden.
so I added that part of the code also to the jQuery check.
To prevent the pop up inheriting the opacity of the overlay I had to use the $('body').prepend again. It all works now.