Facebook - full page overlay
I recently saw something like this,

It is a requests dialog that covers the whole Facebook site. I appreciate any ideas how to accomplish this overlay?
If you take a look at the css for the iFrame you'll see:
.generic_dialog {
height: 0;
left: 0;
outline: medium none;
overflow: visible;
position: absolute;
top: 0;
width: 100%;
z-index: 250;
}
.generic_dialog_popup {
height: 0;
margin: 0 auto;
overflow: visible;
position: absolute;
width: 400px;
padding-left:60px;
padding-right:60px;
text-align:center;
z-index:200;
}
#generic_dialog_overlay {
background-color: #FFFFFF;
height: 100%;
filter: alpha(opacity=0);
opacity: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 200;
}
They seem to be giving the desire effect.
This is achieved by two different div's.
First you will need an 'overlay' div that has a width and height of 100% and a position of fixed, also a high z-index. This overlay will need a background image with transparency or opacity filters to achieve the overlay effect.
Then you have the div that contains the actual dialog, you will need to position this with css and/or javascript depending on the contents.
加载中,请稍侯......
精彩评论