前言

常在各個網站看到一種「讓畫面暗下來，然後跳出明亮（顯眼）對話盒」的效果，雖然可以用 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