2012年9月11日 星期二

[宅] javascript筆記(5) - 關於z-index、visibility和滑鼠點擊事件


好吧,我承認這篇的主題很亂...


z-index、visibility


首先,z-index的概念很簡單,只要他的值越大代表離你越近,也就是越上層。
visibility則是可以設定成"hidden"或"visible"。

這兩個css屬性是我今天在寫一個light-box的時候所用到的,程式碼如下:

<div id="sb-container" style="visibility: hidden;">
</div>
<div onclick="$('#sb-container').css('visibility','hidden')" style="background-color: black; height: 100%; left: 0px; opacity: 0.8; position: fixed; top: 0px; width: 100%; z-index: 9;">
</div>
<br />
<div id="info-box" style="background-color: white; height: 440px; position: fixed; top: 100px; width: 540px; z-index: 10;">


最外層的"sb-container"是把裡面的兩個div裝起來的這不用多說,裡面的第一個div經由以上的設定後會向一層半透明(opacity:0.8)的遮罩蓋住整個可視範圍。

而在剛創建這個物件時發現有些網頁物件的層級比他稍高,所以我增加了z-index的屬性並設定為比較高的數字(9),這層遮罩就蓋住了整個頁面。

在遮罩之上還要有一個類似dialog的視窗來顯示內容,而他勢必要比遮罩還上面一層,否則會被遮掉,這裡可以看到他的z-index為10。

我想讓這個功能跟facebook顯示圖片的方式一樣,點選黑黑的地方就可以把這個 light  box關掉,所以大家可以看到在遮罩的部分有個$("#sb-container").css("visibility","hidden")的onclick事件。

運用z-index和visibility就可以做出簡單的 light  box效果了。



要補充說明的是,在一般的佈版及配置下,即使visibility為hidden的物件還是會占空間的,若要在隱藏時不要占用空間,可用display:none;


滑鼠點擊事件


當滑鼠點下時,我們可從e中找到一個button屬性,內容可能是0~2其中一個,分別代表是哪個滑鼠按鍵被按下:
0 - 左鍵
1 - 中鍵
2 - 右鍵