Overlay Position and Fade in Middle of Screen
Question
I want a very simple way to fade all content in background when I open my modal. The current problem is to let the CSS know how big the site is.
If I use a value of "100%", it will only use the size of the window height instead of the height of the website.
To illustrate my problem, I created a fiddle which can be found here . Clicking the button and then scrolling down will show you what I mean ;-)
The code looks like this:
<html>
<head>
<style>
#overlay {
display: none;
position: absolute;
left: 222px;
top: 5%;
padding: 25px;
border: 2px solid black;
background-color: #ffffff;
width: 455px;
height: 437px;
z-index: 100;
}
#fade {
display: none;
position: absolute;
left: 0%;
top: 0%;
background-color: black;
-moz-opacity: 0.7;
opacity: .70;
filter: alpha(opacity=70);
width: 100%;
height: 100%;
z-index: 90;
}
</style>
</head>
<body>
<table style="width: 90%; height: 110%; border-style: solid; border-width: 1pt; border- color: black;">
<tr>
<td>blubb</td>
</tr>
</table>
<button onclick="document.getElementById('overlay').style.display = 'block'; document.getElementById('fade').style.display = 'block'; ">show modal</button>
<div id="overlay">
Here is some content for the Div Overlay!<br />
Lorem Ipsum<br />
<button onclick="document.getElementById('overlay').style.display ='none'; document.getElementById('fade').style.display = 'none'; ">hide modal</button>
</div>
<div id="fade"></div>
</body>
</html>
And if I may elaborate a bit on this question: Is there a way to posit the overlay in the center of the current view? I'm showing the modal in an iframe because the main content is shown there. I know how to prevent the user from scrolling in the iframe, but how do I put the modal right there where the user is looking instead of a fixed percentage or fixed amount of pixels from the top?
1 answers
solution1
1 ACCPTED 2013-08-12 16:31:46
To lock the background and not have your overlay scroll off of the screen, set it's position to fixed. the background will scroll still behind to overlay, but it will still be greyed out and unselectable.
Likewise you may use position: fixed; to ensure your modal stays centered on the visible screen. Position: fixed; will allow you to work with elements relative to the visible screen and outside the influence of the flow of the rest of the page. Height: 100%; in this scenario will always mean 100% of the visible window, regardless of page location.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.