Facebook的 - 全覆蓋頁

Question

最近我看到這樣的事情，

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

這是一個請求對話框覆蓋整個Facebook網站。我很欣賞任何想法如何完成這個覆蓋？

Answer 1

如果你看看的CSS的iFrame的，你會看到：

.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來實現的。

首先，你需要具有width和100%height和fixed一個position，也是高z-index一個「覆蓋」 DIV。此疊加層需要具有透明度或不透明度濾鏡的背景圖像才能實現疊加效果。

然後，您有包含實際對話框的div，您需要根據內容將其置於CSS和/或javascript中。