Question

I’m trying to implement modal window on my page. Idea is to display a popup window with project screen shot and code sample. For now I’ve implemented popup window with screen shot. Seems to work fine except having 2 issues.

1) mask is not covering the entire window.
2) once popup window is closed, without refreshing if I click the screen shot again, mask is not displayed.

webpage

<div class="screenshot">
            <div class="case">
                <div class="thumb"> <a id="hooversMobile" href="#dialog" name="modal" title="Hoover's Mobile Site"><img src="images/proj_over_2.png" alt="Project thumbnail" style="top: 0px; "></a>
                </div><!-- end thumb-->
            </div><!-- end case-->
        </div>

.js

Answer 1

The following DIV has position relative set. This means any position: absolute elements below it will be relative to its position.

<div class="project" id="mobile"></div>

This is what is causing the overlay to only extend from that position.

The second click problem is due to #mask being faded out but not running fadeIn again like you do on the content div.

Also, to get a better response you should pick out part of the code and copy into JSfiddle. Then you can ask very specific questions about the overlay positioning.