Menu
I want to create an overlay that I will use behind a popup. But when the page is scrolled down the overlay is no more there? I can use javascript to get the height of page's content and then can apply same height to overlay but is there any css based solution?
#overlay{
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
background-color:#000;
opacity: .75
}
838
Approach: To prevent body scrolling but allow overlay scrolling we have to switch the overflow to be hidden when the overlay is being shown. And while the whole page's overflow is hidden or the scroll is disabled the overflow in the y-axis of the overlay is enabled and the overflow can be scrolled.
One of the ways of creating an overlay is by absolutely positioning an HTML element on the page. We create <div> element in the markup then position it absolutely with the position property. After it, we give the <div> high z-index value to make it on top of all other elements on the page with the z-index property.
The basic technique for this is to add a 100% width and height div on top of everything. $('body'). append('<div class="cover"/>'). css({ position: 'absolute', height: '100%', width: '100%', zIndex: '999' });
position must be fixed and also to prevent stacking problems add z-index: 9999999;
demo on dabblet.com
#overlay{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color:#000;
opacity: .75;
z-index: 9999999;
}
just change the position attribute to fixed.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
