How to make modal popup like gmail (when we try to upload exe the pop up that generates covers scrollbar of the page)
A:
Take a look at the modal option in jQuery UI Dialog or the JavaScript alert() function if you only need a simple text dialog.
gnarf
2010-06-18 11:41:00
+4
A:
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.
BrunoLM
2010-06-18 11:43:09
can u show me an example on what u said.
Niraj Choubey
2010-06-18 12:15:01
I added a part of the gmail code, the body doesn't have a scroll, but the iframe does, and the div is not inside the iframe, meaning it can be placed on top of anything inside the body, consequently on top of the scrollbars.
BrunoLM
2010-06-18 16:30:43
Thanks a lot BrunoLM
Niraj Choubey
2010-06-18 21:19:40
A:
Take a look at the modal option in jQuery UI Dialog or the JavaScript alert() function if you only need a simple text dialog.
Niraj Choubey
2010-08-02 12:08:56