Facebook - 整页叠加

Question

我最近看到过这样的事情，

http://imageshack.us/photo/my-images/812/overlayexample.jpg/

这是一个覆盖整个Facebook网站的请求对话框。我很欣赏如何完成这种叠加的任何想法？

Answer 1

如果您查看iFrame的css，您会看到：

.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;
}

他们似乎在给予欲望效果。

Answer 2

这是通过两个不同的div实现的。

首先，您需要一个“叠加”div，其width和height 100%以及position fixed，也是一个高{ {1}}。此叠加层需要具有透明度或不透明度滤镜的背景图像才能实现叠加效果。

然后你有z-index包含实际的对话框，你需要根据内容用css和/或javascript定位。