Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialjohn larson
16,594 Pointspopup doesn't fill the height of the page
this is a simple popup modal kind of thing for a practice project. It works fine except the height doesn't fill the full page if the page is scrolled down. don't understand why.
html...
<div id="hair-modal">
<p class="close-button">close X</p>
<h1>This is the Hair Menu</h1>
<ul>
<li>Braids: $300.00</li>
<li>Cut: $50.00</li>
<li>Color: $75.00</li>
</ul>
</div>
css...
#hair-modal {
position:absolute;
top:0;
left: 0;
display: none;
text-align: center;
width: 100%;
height: 100%;
background: #963;
opacity: 0.9;
}
js...
$("#hair-menu").click(function(){
$("#hair-modal").fadeIn(500).show(500)
});
$("#hair-modal").click(function(){
$(this).fadeOut(500).hide(500)
});
3 Answers
Bryce Santos
11,157 PointsTry setting the positioning to absolute so it's relative to the viewport.
john larson
16,594 PointsAs I understand it, fixed is relative to the view-port so I tried that and it worked. Is that what you meant? Cause otherwise I'm not sure how to make the view-port relative and the element absolute. Thank you so much Bryce!
Bryce Santos
11,157 PointsOops (facepalm) YES! Fixed, not absolute.