Menu
How to make modal popup like gmail (when we try to upload exe the pop up that generates covers scrollbar of the page)
371
GMail runs on a iframe and the overlay div is not inside this iframe, so it stays on top o the iframe consequently on top of the scrollbar.
Code from GMail
html, body {
height:100%;
margin:0;
overflow:hidden; /* no scrollbars (only in the iframe) */
width:100%;
}
.cO { /* this is the iframe */
height:100%;
width:100%;
}
.Kj-JD {
background-color:#C3D9FF;
border:1px solid #4E5766;
color:#000000;
outline:0 none;
padding:5px;
position:absolute;
top:0;
width:450px;
z-index:501; /* div stays on top */
}
.Kj-JD-Jh { /* the shadow */
background-color:#808080;
left:0;
position:absolute;
top:0;
z-index:500;
}
Sample HTML
<body>
<iframe class="cO">...</iframe> <!-- the scroll works on the iframe, not the body -->
<div class="Kj-JD"></div> <!-- outside the iframe -->
<div class="Kj-JD-Jh" style="opacity: 0.5; width: 1440px; height: 361px;"></div> <!-- black background -->
</body>
To show a div on top I recommend jqModal, it does all the hard work for you.
109
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
