CODEWITHSUNDEEP
jqueryhtmlcssmodal-dialog
kdm
kdm

Reputation: 35

Modal window gets hidden behind header?

So I've implemented a modal window jQuery plugin called "Reveal" for a 'Size Guide' window I've added to my bigcartel site (it isn't done yet so please do not try buying anything, button is open for testing purposes) If you're scrolled up at least a little bit or all the way up, and click the 'SIZE GUIDE' button, the modal window pops up and gets hidden behind the header.

If you were to scroll down enough and click the 'SIZE GUIDE' button, the modal window also gets hidden behind the 'YOU MAY ALSO LIKE...' section as well. In other words, the modal window only likes to show up in the 'gray background' area.

I've tried z-index properties but nothing is working.

The modal window CSS for just the modal window alone looks like this:

.reveal-modal {
    visibility: hidden;
    top: -200px; 
    left: 50%;
    margin-left: -320px;
    width: 585px;
    background: #fff url(modal-gloss.png) no-repeat -200px -80px;
    position: absolute;
    z-index: 101;
    padding: 30px 40px 34px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -box-shadow: 0 0 10px rgba(0,0,0,.4);
    }

Here is where I got the Reveal modal window: http://zurb.com/playground/reveal-modal-plugin

To summarize this, my overall question is, how do I have the modal box pop up in not just the gray background area, but show up over the header and 'you may also like...' section? Because they're currently hiding behind the header and (if you scroll down far enough and click the 'SIZE GUIDE' button) the 'you may also like...' section.

Upvotes: 2

Views: 3034

Answers (2)

kevindeleon
kevindeleon

Reputation: 1924

Your problem seems to be this declaration here:

div#content.strip {
    overflow: hidden;
}

content contains the modal and so it is hiding the "overflow." If you can't remove or re-work that style, you may want to move your modal outside of content wrapper.

Upvotes: 2

KHCreates
KHCreates

Reputation: 46

I think what you meant (hopefully) is that the Model box is positioned to one part of the screen and doesn't stay in front of users screen as they scroll?

If that's the case try this:

.reveal-modal {
visibility: hidden;
top: -200px; 
left: 50%;
margin-left: -320px;
width: 585px;
background: #fff url(modal-gloss.png) no-repeat -200px -80px;
position: fixed;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
}

Upvotes: 0

Related Questions