I am working on a site that uses Alertify prompts to confirm events on Google Maps. This works fine with the map positioned in a div, but with the map in fullscreen mode the prompts are obscured by the map.
The Alertify prompt is still present with the correct dimensions, but seems to be behind the map. I've tried forcing the z-index of both the map and the alertify divs, but to no effect.
If I force a rule of display:none to the map div it disappears and the dialog is visible again, but when visible the map seems to be being forced to the front somehow?
Using Google Maps Javascript API v3.
Update: I've found a workaround, though not ideal. Alertify dynamically inserts a div with class .alertify before the closing body tag when the library is called. If this div is immediately moved to be inside the first div in the map canvas it will show over the map. Luckily this can be forced using alertify's onshow hook as so:
alertify.confirm("Are you sure you want to delete this", function(ev) {
//Code if yes
}, function(ev) {
//Code if no
}).set({onshow:function(){$(".alertify").prependTo("#canvas div:first")}});
No pretty, but it works in lieu of a proper solution.
No point leaving this open further, answer as above.