michaellunsford Posted July 7, 2011 Share Posted July 7, 2011 pretty simple CSS thing I've seen done on a number of sites. You click an image, and a div "pops" up with a close "X" in the top right corner. Usually, the rest of the site behind the popup is masked with a 60% opacity. So, I built one and it works great -- except my background mask isn't working quite right. It's set to height:100% -- if the page has a scroll bar and the user scrolls down, the 100% high mask ended at the bottom of the screen (not the page). So, they can scroll past the mask. The masks I've seen out there just have jquery apply a specific pixel height to the mask. I'm curious if there's a CSS-only way to do this. So far, I've not been successful. Thoughts? Quote Link to comment https://forums.phpfreaks.com/topic/241360-masking-the-page/ Share on other sites More sharing options...
Zane Posted July 7, 2011 Share Posted July 7, 2011 what you need to do to your overlay, not mask, is give it a position of fixed... and that should solve your scrolling problem. Quote Link to comment https://forums.phpfreaks.com/topic/241360-masking-the-page/#findComment-1239797 Share on other sites More sharing options...
michaellunsford Posted July 7, 2011 Author Share Posted July 7, 2011 Yep, I should have thought of fixed -- it actually fixes a few glitches I'm having. Fixed seems to be a challenge for iOS devices, though. I guess I'd have to rely on jquery in that case, though. Right? Quote Link to comment https://forums.phpfreaks.com/topic/241360-masking-the-page/#findComment-1239805 Share on other sites More sharing options...
Zane Posted July 7, 2011 Share Posted July 7, 2011 Yep, I should have thought of fixed -- it actually fixes a few glitches I'm having. Fixed seems to be a challenge for iOS devices, though. I guess I'd have to rely on jquery in that case, though. Right? If you want the overlay to appear on the click of something, then yeah... you'll have to use jQuery, or JavaScript if you're old fashioned like that. Quote Link to comment https://forums.phpfreaks.com/topic/241360-masking-the-page/#findComment-1239811 Share on other sites More sharing options...
michaellunsford Posted July 7, 2011 Author Share Posted July 7, 2011 If you want the overlay to appear on the click of something, then yeah... you'll have to use jQuery, or JavaScript if you're old fashioned like that. Not to fire the event -- but for layout. iOS devices don't support "position:fixed" -- the elements just appear at the bottom of the page (based on their appearing last in the html code). Quote Link to comment https://forums.phpfreaks.com/topic/241360-masking-the-page/#findComment-1239820 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.