I'm trying to achieve the effect of when a user clicks a link an overlay 50% alpha black <div> covers the screen and the popup div displays in the middle. I found this article does exactly that.


Now I have to set up the html a little defferent to the tutorial because the pop up div is situated a lot deeper. The following isn't the exact source just a demo.


<div id=”blanket” style=”display:none;”></div>

<div id="wrapper">

    <div id="menu"></div>
    <div id="main>

        <div id=”popUpDiv” style=”display:none;”>

            <a href=”#” onclick=”popup(’popUpDiv’)”>Click Me To Close</a>


        <a href=”#” onclick=”popup(’popUpDiv’)”>Click Here To Open The Pop Up</a>


    <div id="footer"></div>


Now the problem I'm having is this seems to work in IE6, IE7, and FF3 but in FF2 the gray overlay appears over the popup container.

I have tried it in different variations too instead of placing the blanket div in the top level under the body tag I tried it above the popup div. The problem this time around is the button images in the main menu div appear above the overlay div in FF2 and in IE6 the overlay div takes up a 1/4 of the screen not the complete screen.

So I figured I'm going to stick with having the blanket div at the top level and try fix the FF2 problem. Does anyone know if this is fixable and how to fix it or even a better technique of doing this?