聚焦帶鎖背景的圖片

在Facebook上，您看到一張圖片，屏幕的其餘部分變爲鎖定灰色，，直到您關閉該圖片爲止，您無法執行其他任何操作。它背後的邏輯是什麼？它是我需要把隱藏作爲我的CSS的一部分的對象？它是用jQuery構建的代碼行嗎？什麼是對待這件事的正確和可接受的方法？聚焦帶鎖背景的圖片

我知道這是jQuery，但不能籠罩我的頭。

來源

2012-03-21 FedeSc

您應該檢查thickbox或lightbox plugin for jQuery和other lightbox和thickbox projects。

對於其他模式對話框（位於頁面上的可撤銷對話框），請查看jQuery UI框架的dialog component。

如果你看看演示頁面並使用瀏覽器內置的開發工具，你可以看到它是如何工作的。 ThickBox的例如有重疊div來禁用整個頁面：

<div id="TB_overlay" class="TB_overlayBG"></div>

與下面的CSS：

#TB_overlay { 
    position: fixed; 
    z-index: 100; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    width: 100%; 
}

正如你所看到的，東西有100的z指數在最前面其餘的部分，並且遍佈整個頁面。

其次存在重疊窗口

<div id="TB_window" ...></div>

與102的z索引中心的，是在上述覆蓋層的前：

#TB_window { 
    position: fixed; 
    z-index: 102; 
    top: 50%; 
    left: 50%; 
    ... 
}

來源

2012-03-21 14:55:15

爲什麼downvote？ – 2012-03-21 15:00:20

由於答案大幅擴展，我收回downvote，但它開始與字面上只是「你應該檢查燈箱」，甚至沒有回答這個問題。 – JJJ 2012-03-21 17:22:09

@Juhana：是的，你說得對。我意識到在downvote之後，謝謝！ – 2012-03-21 20:37:00

我想你指的是lightbox效果。

它通常具有覆蓋做相對絕對positionned body元素，寬度100％的寬度和高度的div：

div.overlay { 
position : absolute; 
top : 0; 
left : 0; 
width : 100%; 
height : 100%; 
}

此疊加在裏面，你把你的形象，每例如：

div.overlay img { 
position : absolute; 
top : 50%; 
left : 50%; 
margin-left : /* negative half the width of your image */ 
margin-top: /* negative half the height of your image */ 
}

這只是其中一種方法（只有在知道圖像尺寸的情況下才能使用）。通常通過javascript計算居中。

搜索燈箱，你會發現噸Jquery插件和教程。

來源

2012-03-21 15:00:20 mddw

聚焦帶鎖背景的圖片

回答

相關問題