LightBox2 hides behind HTML iFrame

StackOverflow https://stackoverflow.com/questions/18133076

Question

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>
Was it helpful?

Solution

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;
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top