开发者

Facebook - full page overlay

I recently saw something like this,

Facebook - full page overlay

h开发者_StackOverflow中文版ttp://imageshack.us/photo/my-images/812/overlayexample.jpg/

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜