如何制作Lightbox效果?

2016-07-11 1514 0 編輯:Monster 來源:相關書籍

所謂Lightbox,其實是現在網頁上很常見的一種效果,例如單擊網頁上某個鏈接或圖片,則整個網頁會變暗,并在網頁中間彈出一個層來,此時用戶只能在層上進行操作,不能再單擊變暗的網頁。

制作Lightbox效果步驟是:首先在網頁中插入一個和整個網頁一樣大的div,設置它為絕對定位,并設置它的z-index值僅小于彈出框,背景色為黑色,在默認情況下不顯示;當單擊網頁上某個鏈接時,則顯示這個div,并設置它的透明度為7000,這樣就會有一個黑色的半透明層覆蓋在網頁上,使網頁看起來像變暗了一樣,而且這個層將擋住網頁上所有的鏈接等元素,使用戶單擊不到它們;同時彈出一個較小的絕對定位的div,放置在網頁的中間作為彈出框。具體步驟如下。

1)寫結構代碼

由于需要一個層覆蓋在網頁上,還需要另一個層做彈出框,因此結構代碼中有兩個div。

2)設置覆蓋層的CSS樣式

覆蓋層不能占據網頁空間,所以應設置為絕對定位,而且必須和網頁一樣大,因此設置它的位置為"top:0%;left:0%",大為"width:100%; height:100%;"。

3)設置彈出框的CSS樣式

彈出框也是一個絕對定位元素,并且初始時不顯示,它的z-index值應最大,這樣才會在覆蓋層的上方顯示。

4)編寫打開彈出框JavaScript代碼

當鼠標單擊a元素時,要同時顯示覆蓋層和彈出框。

而且單擊a元素時,不能鏈接到其他網頁,也不能設置href=“#",那樣會跳轉到頁面的頂端,可以設置為href="JavaScript:void(0) ",這樣單擊時頁面不會發生跳轉。

5)編寫彈出框的“關閉”按鈕代碼

單擊彈出框的“關閉”按鈕后,應同時隱藏彈出框和覆蓋層,回到初始狀態。

這樣一個簡單的Lightbox效果就做好了,但是在IE6中需要將網頁上傳到服務器中才能看到正確的效果。


本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾