I am trying to show a whole page using an iFrame, but after 5 seconds, I want a LightBox to pop up over the iFrame. The problem I'm having is that the iFrame is on top of the LightBox pop-up and I have no idea how to make it the other way around.
I was reading that if the iFrame source has a flash player, that could be the cause; but there is no Flash anywhere on the page. I've been tinkering with things for over a hour and cannot figure out what I'm not doing.
This is the page with the iFrame: iFrame
This is the page without the iFrame: No iFrame
I know the timer and the LightBox pop-up are working, they're just hiding behind the iFrame. Any ideas as to what is wrong?
<body>
<script type="text/javascript">
$(document).ready(function() {
var count = 5;
var counter = setInterval(timer, 1000);
function timer() {
count = count - 1;
if (count <= 0) {
clearInterval(counter);
$("#showFB").trigger('click');
return;
}
}
});
</script>
<a id="showFB" href="img/globe.png" data-lightbox="image-1" title="" style="display:none">i</a>
<iframe title="ats" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:visible; z-index:999999;" src="http://www.automatedtrafficsuite.com/login"></iframe>
</body>
you have z-index problem
give bigger value to z-index of lightbox
in lightbox.css on line 8
z-index: 999999;
in lightbox.css on line 20
z-index: 1000000;