前言

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

準備食材（Prerequisites）

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

製作步驟

  1. 在這個例子中，我們使用一個按鈕來打開 light dialog，所以我們寫這樣一行 HTML： 
    <input type=”button” value=”開啟對話盒” onclick=”openDialog()” />

    在這一行 HTML code 裡，我們宣告了一個「按鈕」，它的顯示文字是「開啟對話盒」，並且在按鈕被按下時，呼叫定義好的 JavaScript 函式－openDialog()

  2. 接下來就是開始寫 JavaScript 的 code 了，首先，我們宣告一個 overlay 及一個 LD_win 這兩個變數，overlay 用來代表使畫面看起來變暗的圖層，而 LD_win 用來表示顯示出來的對話盒。 
    var overlay;
var LD_dlg;

    然後，定義一下 openDialog 這個 JavaScript 函式：

    function openDialog() {
  ...
}
  3. 在這個 function 裡面，建立 overlay 為一個文件元件，為了要讓螢幕看起來變暗，這裡的想法是－－塞一個 div ，背景色為黑色，而且要半透明顯示，我們先在 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;
}

    所以用下列 JavaScript code 來處理 overlay：

    overlay = document.createElement(‘div’); /* 建立一個 div element */
overlay.id = ‘overlay’;
document.body.appendChild(overlay); 
/* 把 overlay 這個圖層加入，此時整個畫面就會被 overlay 蓋住了。 */
  4. 這時只有一個蓋住全畫面的圖層，還沒有對話盒，所以先來定義對話盒的 CSS： 
    #LD_dlg {
  position: absolute;
  background-color: #fff;
  z-index: 102;
}

    然後，再到剛才加入 overlay code 的位置，再加入下列的 code：

    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 = ‘<p style=”text-align: right”><a href=”#” onclick=”closeDialog();”>關閉</a></p>’;
document.body.appendChild(LD_dlg);
  5. 如此一來，就會有一個白色背景的對話盒出現在畫面的正中央了，不過，這裡我們加入了一個關閉的功能，所以我們也要去定義對應的 JavaScript 函式： 
    function closeDialog() {
  document.body.removeChild(LD_dlg);
  document.body.removeChild(overlay);
}

    這樣，當按下對話盒上的「關閉」時，就會觸發這個 JavaScript 函式使畫面恢復原狀了。

  6. 你可以直接把對話盒的內容寫在 LD_dlg 的 innerHTML 裡，也可以寫在別的 HTML 檔案裡再用 iframe 放進來，或者是利用 Ajax 去 request 一個 HTML 檔等等都可以。

其實很簡單對吧 :P