开发者

Facebook - full page overlay

开发者 https://www.devze.com 2023-03-27 21:47 出处:网络
I recently saw something like this, h开发者_StackOverflow中文版ttp://imageshack.us/photo/my-images/812/overlayexample.jpg/

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

精彩评论

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

关注公众号