[JS食譜] lightbox 實作練習

前言

常在各個網站看到一種「讓畫面暗下來,然後跳出明亮(顯眼)對話盒」的效果,雖然可以用 Lightbox JSthickbox 這些 toolkit 作出來,不過有時候用別人寫的工具容易會與其它工具產生衝突,所以才會想自己寫一個,順便當作練功。

準備食材(Prerequisites)

  1. HTML 基本知識
  2. CSS 基本知識
  3. JavaScript 基本知識

製作步驟

  1. 在這個例子中,我們使用一個按鈕來打開 light dialog,所以我們寫這樣一行 HTML:
    [code lang="xml"][/code]
    在這一行 HTML code 裡,我們宣告了一個「按鈕」,它的顯示文字是「開啟對話盒」,並且在按鈕被按下時,呼叫定義好的 JavaScript 函式-openDialog()
  2. 接下來就是開始寫 JavaScript 的 code 了,首先,我們宣告一個 overlay 及一個 LD_win 這兩個變數,overlay 用來代表使畫面看起來變暗的圖層,而 LD_win 用來表示顯示出來的對話盒。
    [code lang="javascript"]var overlay;
    var LD_dlg;[/code]
    然後,定義一下 openDialog 這個 JavaScript 函式:
    [code lang="javascript"]
    function openDialog() {
    ...
    }[/code]
  3. 在這個 function 裡面,建立 overlay 為一個文件元件,為了要讓螢幕看起來變暗,這裡的想法是--塞一個 div ,背景色為黑色,而且要半透明顯示,我們先在 CSS 定義中定義這樣的東西:
    [code lang="css"]
    html {
    
 height: 100%; /* for stupid IE */
    }

    #overlay {
    position: absolute;
    background-color: #000;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: 100;
    }[/code]
    所以用下列 JavaScript code 來處理 overlay
    [code lang="javascript"]
    overlay = document.createElement(‘div’); /* 建立一個 div element */
    overlay.id = ‘overlay’;
    document.body.appendChild(overlay);
    /* 把 overlay 這個圖層加入,此時整個畫面就會被 overlay 蓋住了。 */[/code]

  4. 這時只有一個蓋住全畫面的圖層,還沒有對話盒,所以先來定義對話盒的 CSS:
    [code lang="css"]
    #LD_dlg {
    position: absolute;
    background-color: #fff;
    z-index: 102;
    }[/code]
    然後,再到剛才加入 overlay code 的位置,再加入下列的 code:
    [code lang="javascript"]
    LD_dlg = document.createElement(‘div’);
    LD_dlg.id = ‘LD_dlg’;
    LD_dlg.width = ‘320px’;
    LD_dlg.height = ‘240px’;
    LD_dlg.left = (document.body.clientWidth - 320) / 2 + ‘px’;
    LD_dlg.top = (document.body.clientHeight - 240) / 2 + ‘px’;
    LD_dlg.innerHTML = ‘

    關閉

    ’;
    document.body.appendChild(LD_dlg);[/code]

  5. 如此一來,就會有一個白色背景的對話盒出現在畫面的正中央了,不過,這裡我們加入了一個關閉的功能,所以我們也要去定義對應的 JavaScript 函式:
    [code lang="javascript"]
    function closeDialog() {
    document.body.removeChild(LD_dlg);
    document.body.removeChild(overlay);
    }[/code]
    這樣,當按下對話盒上的「關閉」時,就會觸發這個 JavaScript 函式使畫面恢復原狀了。
  6. 你可以直接把對話盒的內容寫在 LD_dlginnerHTML 裡,也可以寫在別的 HTML 檔案裡再用 iframe 放進來,或者是利用 Ajax 去 request 一個 HTML 檔等等都可以。

其實很簡單對吧 😛

  • Pingback: University Update - AJAX - [JS??] lightbox ????()

  • 非常實用,感覺很適合像我這種「了解 html, css, 對 javascript 一知半解,沒啥開發經驗的人」,感覺像是 javascript lesson 1 🙂

  • 你好我是網頁新手,現再想寫一個你上面做的div 做一個登入畫面,像推推王那種登入畫面,可是看完你的程式碼還是不太會用,可否請教你一下

  • 僵屍達:
    你這樣子問, 我也不知道要怎麼幫你啊 Orz

  • 它顯示錯誤你的第一行 iuput 必須要有一個物件

  • wei

    我使用了您的方法
    不過沒有效果耶@@
    變成網頁最底下才會出現一行的div畫面

  • wei:
    感覺起來是 position 沒有設成 absolute 或者是你計算 style.left, top, width, height 的地方有錯 @@

  • wei

    我是完全按照上面的範例程式碼copy的@@

  • 應該要修改一些地方吧…Orz

  • JR

    [quote comment=””][…]

    Link to Article

    ajax [JS??] lightbox ???? » Posted at ericsk’s blog on Friday, June 29, 2007 […][/quote]

    HELLO,我想請問一下LIGHTBOX JS,因為它在FRAMESET中無法全營幕顯示,只能在它的FRAME中,不知道有辦法讓它全營幕嗎?有人說可以在IFRAME,但我想要用在一般FRAME中,謝謝.

  • 說真的,不知道是不是IE 7 又多新問題…
    #overlay {
    position: absolute;
    background-color: #000;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: 100;
    }

    我加上了 top:0px; left:0px; 才肯給我乖乖完整蓋住畫面(不然上面和左邊都有空白)

  • Pingback: (依主題重組):電腦技術領域 « eweibookmark()