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.
精彩评论