什麼是響應式設計？

拜行動裝置上網普及，因此目前 Responsive Web Design 響應式設計 這個 Web 設計方式很熱門，而要做到這個設計，必須要先認識CSS3 Media Queries，這個可以讓你根據裝置或瀏覽器的長寬不同，而可以有不同的CSS呈現，比方，當夠寬的時候，會呈現三個Column（不是真的欄，是排版的欄）。縮小的時候，可能剩下兩個或甚至一個，而原本有橫向的多個選項，也可能被合併成一個按鈕或LIST，點了才會展開，......等等

所以，什麼是響應式設計呢？就是會彈性的根據你裝置的尺寸不同，呈現不同的外觀，相同的內容，並讓使用者在最適當的、最少需要用手指放大滑動的一種設計概念。

JS的Timer

JS給了網頁兩種Timer，其實是一樣的東西，只是用法跟行為有一點點不同罷了


setInterval()跟一般常見的Timer沒有太大的差異，就是持續的間隔一段時間就執行一段程式（一個函式）
setTimeOut()則是隔一段時間之後，一段程式（一個函式）會被執行一次，就這麼一次。




先介紹setInterval()吧，常用兩種呼叫型態，一個是就直接把要做的程式，寫在參數裡function()中，通常要做的事情應該不多才會這樣寫吧，不然不美觀啊。底下的範例，就是每三秒鐘執行一次alert。

var MyTimer = setInterval(function(){alert("Hello")},3000);

另外一個，則是先把函式寫好然後以函式呼叫當成參數。比方底下的例子就是每五秒呼叫一次 doSomething()看裡面要做什麼事情。


var MyTimer = setInterval( "doSomething()", 5000 );

function doSomething ( )
{
  // (do something here)

}


怎麼清除或停掉這個Timer呢？很簡單，就是 clearInterval( MyTimer );對，就在剛剛你疑惑的地方，呼叫函式其實setInterval()其實會傳回一個 Timer物件（或ID）就是用來當你想清除或停掉他的時候用的。





相同的寫法，可應用在setTimeOut()上，非常的簡單。我就不重複寫了

網頁的ComboBox的使用方式

基本上，已經有人寫了非常完整又圖文並茂的介紹了，我就不用再贅述了，請看下拉選單ComboBox詳細介紹文但是怕那天原文刪除，或其他因素，所以我還是會在底下稍微的更簡單的說明一下語法。


1.怎麼做出下拉選單，如下利用HTML語法，可做出三個選項的下拉選單：

 <select id = "ComboBxMonth" >
       <option value = "1" >1月份</option>
       <option value = "2" selected = true >2月份</option>
       <option value = "3" >3月份</option>
 </select>
           

2.下拉選單如何設定預選項目到某一個選項，以及怎麼讓某個項目看得到但是不能選？如下，就會讓1月份無法被選，以及預設選擇2月份：

 <select id = "ComboBxMonth" >
       <option value = "1" disabled="disabled" >1月份</option>
       <option value = "2" selected = "true">2月份</option>
       <option value = "3" >3月份</option>
 </select>
           

3.選取目前下拉選單的選取值，或選項文字：

$('#ComboBxMonth option:selected').val();                                      // 取得數值

$('#ComboBxMonth option:selected').text();                                    // 取得文字


4.指定或取得目前下拉選單元件選到第幾個選項：
$('#ComboBxMonth option:[index=3]').attr('selected', true);      // 設定
$('#ComboBxMonth option:selected').index();                                // 取得


5.增加一個選項：（第一種寫法的JQuery Selector目前還看不懂）
$('#ComboBxMonth).append( $('<option></option>').val('9').text('Test') );

$('#ComboBxMonth).append( '<option value = "9" >Test</option>' );


6.增加一個選項到特定位置：
$('#ComboBxMonth option:eq(2) ).after( $('<option></option>').val('9').text('Test') );

$('#ComboBxMonth option:eq(2) ).after( '<option value = "9" >Test</option>' );


7.如果有某個資料跟下拉選單相符合，則把元件選到該選項：
$('#ComboBxMonth option[ value = ' + "2月份" + ']' ).prop( "selected", "true" );

紅色的部分，非常容易寫錯，因為夾雜了變數進去串

8.清除所有選項：
$('#ComboBxMonth option').remove();

9.清除第幾個選項：
$('#ComboBxMonth option:eq(2)').remove();

10.清除特定Value的那個選項：
$('#ComboBxMonth option[ value = 2 ]').remove();


11.想清除符合某個文字的選項？目前找到沒有方便的作法....

網頁上要透過JS取得物件的left或top，請先讓他出現在畫面上

如果該物件（比方div、img、h4）的狀態是被hide起來，並沒有顯示在畫面上
那麼透過JQuery去取得該物件的位置，比方$(this).position().left將會得到0
你一定要先讓物件show()在畫面上，才能去取得或設定他的位置。

Javascript的array排序（包含2維array）

JS的array怎麼宣告使用？如下，宣告array時不用告知長度，就要多少用多少。

var MyArray = [];
MyArray[0] = 10;
MyArray[1] = 20;



那二維array怎麼用呢？如下，同樣的概念，要多少用多少，然後告知那個位址是個array就好

var MyArray = [];
MyArray[0] = [];
MyArray[1] = [];
MyArray[0][0] = 10;

MyArray[0][1] = 15;

MyArray[1][0] = 20;

MyArray[1][1] = 30;

不過二維array有個指定用法，說明如下，一樣是二維array，但是，用的是指定該column的名稱的方式，這樣在後續使用的時候，可以不用記得是第幾維，只要指定正確的column名稱就好了。

var MyArray = [];
MyArray[0] = [];
MyArray[1] = [];
MyArray[0]["id"] = 10;

MyArray[0]["id"] = 15;

MyArray[1]["Email"] = 20;

MyArray[1]["Email"] = 30;

準備工作完成，瞭解JS的array使用方式之後，來看看排序吧

一維array很簡單，就呼叫MyArray .sort()，就這樣（如果想瞭解工作的原理，請看本文最下方的補充。）MyArray就會變成排序完成的Array（所以如果要保留原本的Array，請利用 var SourceMyArray = MyArray.slice(0);這個函式）

二維就比較複雜一些。要告訴sort()函式，我要用哪一維來排序，方法為何。這個寫法上就是：

MyArray.sort( function(a,b)

{

return a["id"].toUpperCase() < b["id"].toUpperCase() ? -1 : ( a["id"].toUpperCase() > b["id"].toUpperCase() ? 1 : 0 );

//return a["id"].toUpperCase() > b["id"].toUpperCase(); 錯誤的寫法，漏掉了等於的情況

});

大概的意思就是告訴排序函式幫我用id這個欄位幫我做排序，排序方法則是拿兩者比大小，並根據結果傳回-1或1或0。其中有個有趣的發現，當你用了上面我註解掉的那一行的錯誤的寫法，在10筆資料內的排序都會正確，一旦超過10筆，就會排序錯誤，為什麼？還真研究不出來，日後若有人知道原因，煩請告訴我喔。

這個範例程式放在這裡

可以自行貼到http://jsfiddle.net/或者是http://htmledit.squarefree.com/來做測試喔

補充說明JavaScript的Sort：

• sort 在適當的位置排序陣列的元素。

var a = ['Wind', 'Rain', 'Fire'];
a.sort();
print(a); // Fire,Rain,Wind

sort 也可以接受 Callback 函數來決定如何排序陣列的內容。這個函數會對兩個值做比較，並返回下列三個值其中之一︰

• 如果 a 在排序系統中小於 b，返回 -1（或任意的負數）
• 如果 a 在排序系統中大於 b，返回 1（或任意的正數）
• 如果 a 和 b 被認為是相等的，返回 0。

例如，下面的例子會以字串的最後一個字母來排序︰

var a = ['Wind', 'Rain', 'Fire'];
function sortFn(a, b) {
  var lastA = a[a.length - 1];
  var lastB = b[b.length - 1];
  if (lastA < lastB) return -1;
  if (lastA > lastB) return 1;
  if (lastA == lastB) return 0;
}
a.sort(sortFn);
print(a); // Wind,Fire,Rain

$(function() 是甚麼意思？

之前一直看不懂$(function() ，所以很多JQuery UI也都沒有在用，現在終於瞭解了，$(function() 等同於$(document).ready()


$(function() 
{
    $( "#datepicker" ).datepicker();
});

等同於

$(document).ready(function() 
{
    $( "#datepicker" ).datepicker();
});

也就是網頁好了之後，立刻執行的Function。

如何讓一個DIV包含另外一個DIV ------ 如何控制網頁元素（Tag element）讓元素從原本的位置（指的是親子位置）變更到其他位置

我在設計網頁的時候，經常會需要用一個Design的DIV來試著排版，但這內容可能在一開始得隱藏，並且之後是在按下按鈕之後才出現在PAGE的主要DIV當中，所以得用JS來動態的在按鈕事件中將物件元素搬移或加入到另外一個DIV中。

原本以為會用到的是 JQuery 的 add()，但是跟想像的有所差異

add()是用來把指定的元素加入自己所在的集合，然後一起去做什麼事情。比方說
這個例子，他是把所有的DIV加上邊框，之後包含著<P>元素來做把背景變成黃色。然而，<P>元素本身並不會變更其親子關係，也就是<P>元素如果在其他DIV中，這個關係不會變。




應該要用 JQuery 的 append(), prepend(), after(), before()來做，才是真正的把元素加到某個元素中。差異說明（請先下載範例）：




畫面被分割成上、中、下：Div_Header、Div_Content、Div_Footer三個區塊，每個區塊各自放了一些方塊，而「我會被搬走」這個方塊則是在按下上方的按鈕之後，會被移動，可從上方的藍色框線看出Div_Header的範圍，進而判斷出是否DivAdd01在Div_Header之中。

1.比方我要把DivAdd01這個ID的DIV放到Div_Header中，則該使用append(),跟prepend(),兩個函式，會把DivAdd01加到Div_Header中，並決定放置在最後或最前面的位置。

2.另外，after(), before()則是會把DivAdd01加到Div_Header的父親層，讓DivAdd01跟Div_Header處於同一層，然後差異也在於放在之前或之後。

3.按下add按鈕，則會把left連同Top_left，具有這兩個class的元素都會被設定為被景色白色。

版面設計的基礎知識

版面設計的基礎知識：

網頁是用來呈現資訊的，資訊的量通常不小，要讓來看網頁的人能有好的吸收能力才行，要傳達的資訊有視覺元素與文字元素兩大類，將資訊做好分類、群組之後，藉由底下的技巧，達成良好吸收的目的。

1.      讓關連性高的元素靠在一起。藉由改變形狀、顏色差異、加入區隔線、對齊等等方法來區分各個不同群組。

2.      除非精心設計過，否則不建議使用置中對齊，會造成視覺流程障礙，多半使用靠左對齊為佳。

3.      利用字體大小、影像形狀的大反差，來做出對比，做出強調，引導使用者的視覺

4.      相同的呈現理念，就可以反覆的一致的應用在同樣的元素上，讓使用者習慣並很快的吸收變成經驗，看到這種呈現，就知道會是甚麼類型的資訊。

5.      版面大小有兩種設計：

l   一種是固定寬度設計，內容版面的位置不會因為拉大縮小視窗而改變，但是，當使用者的螢幕（解析度）太大或大小或瀏覽器視窗拉大拉小，會導致周圍的空白太多而顯眼，或者是導致橫向捲軸出現，這兩種狀況都可能讓使用者不愉快。

l   另外一種則是動態寬度設計，會隨著螢幕（解析度）或瀏覽器視窗拉大拉小而改變整個版面寬度，但設計上內容元素如果也是要動態寬度高度才比較適合，但，這會限制某些設計的發揮，因為長寬無法固定，比例也無法固定，某些圖文的比例會失控。

6.      首頁的任務：大多數人都知道，首頁是跟其他內容頁面有絕大的不同，他是使用者第一眼見到的頁面，要強調網站的風格、種類就必須在這邊呈現出明確、鮮明的目的，比方有些網站是以提供大量資訊為目的，就會一次呈現大量的分類資訊，比方Yahoo，而有的是萬分明確的告訴你目的，畫面元素簡單到不行，比方Google，其他比方有企業常用的設計方式，鮮明企業形象的視覺元素，透過導覽列來逐一挑選使用者想看的內容，通常注重在衝擊力的設計。比方ASUS，Acer。

7.      導覽列的任務：導覽列肩負著引導使用者方向的重要功能，所以在可用性的注重上，會高過外觀的設計。導覽列設計上大至有分四種：

l   圖像化項目分類型：圖像化有比較好的視覺效果，但是一旦日後需要增加項目，則可能造成版型設計困難崩壞。

l   文字連結型：通常會在入口網站、購物網站使用，由於每天或經常性的更新內容，所以文字連結來當導覽項目較為容易修改。

l   收納型：就是列出大項目，滑鼠滑過去之後會列出第二層項目的設計方式。對於項目眾多，變動性不高的網頁，很適合這種作法，因為設計耗時。

l   麵包屑分層指引型：這個算是一種輔助的類型，在項目有多層之下，麵包屑指的是網頁上會有地方列出目前所在位置，通常用這種方式來表示：「首頁>產品>主機板」。

8.      版面配置並沒有一定制式的規定，但是，通常有一些常用的型，從「上方導覽型」、到「上方加左方導覽型」、到「三欄式」都是最常見的。也有一些充滿設計感的自由版型，通常越自由，就越考驗著設計師的功力就是了。

Javascript 處理鍵盤事件，Enter, ESC ......

事件註冊的方式，跟一般 Click 差不多

$('.Input_Group_InputName').keypress( function (event)
{
               // 處理
} );


也可以針對某些按鈕才做不同的處理方式


$('.Input_Group_InputName').keypress( function (event)
{
if ( event.which == 13 || event.keyCode == 13 )
{
// 處理
}
} );


幾個比較特別的按鈕
Enter按鈕 的 KeyCode 是13，ESC按鈕是27
ESC 按鈕只能被 KeyUp 抓到，無法在 KeyPress 抓到（限定瀏覽器）
有些瀏覽器沒有 event.keyCode，只有event.which，所以兩個都要寫。

讓畫面中某個區塊或圖形固定在整個瀏覽器視窗的某個位置，不隨著捲軸而移動

如何讓畫面中某個區塊或圖形固定在整個瀏覽器視窗的某個位置，不隨著捲軸而移動？

這個有幾種作法，其中一種，最簡單的，就是利用CSS的Potision屬性，有一個設定值為fixed，這樣，設定的TOP跟LEFT就會讓那個物件固定在該位置，不會因為捲軸捲動或放大縮小，聽起來一切都很完美，只有一點小瑕疵，就是當使用瀏覽器的放大縮小的時候，這個圖形或區塊的大小不會變，但是，這物件裡頭的物件（比方Label）或文字則會跟著放大，這樣，我現在的老闆不能接受，因為他會放大到400％倍，然後說內容都亂了（大囧）


沒辦法，只好用另外一種方法，就是自己寫Script來控制，這個也不難，就是把該物件，比方DIV，設定Potision為absolute，然後取得瀏覽視窗高跟寬，以視窗的高來減去物件高度加上ScrollY以及用視窗的寬減去物件寬度加上ScrollX（備註一）。把上述的這個計算公式寫在Resize()跟Window.Scroll()事件中，隨時把位置固定。




備註一：由於各家瀏覽器不同，所以取得視窗高度、寬度的方式有所不同。取得捲軸位置也有所不同。



//取得瀏覽器視窗高度
function getBrowserHeight() 
{
    if ($.browser.msie) 
{
        return document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
    } 
else 
{
        return self.innerHeight;
    }
}




//取得瀏覽器捲軸位置X
function getBrowserScrollX() 
{
    if ($.browser.msie) 
{
        return document.body.parentNode.scrollLeft;
    } 
else 
{
        return window.scrollX;
    }
}

JS的Alert要謹慎使用

Alert本身就是個畫面不優，很陽春的秀訊息對話框，最好僅拿來DEBUG的時候用，因為除了畫面之外，他還是個會卡畫面的Modal Dialog，這會讓處於同一個Session的頁面的JavaScript都會停止，比方說HTML5的Audio元件，我想Video元件也會，但，如果是Script無法執行，那應該連控制個畫面都會無法進行。這個沒有測試過，就不敢確定了

AJAX簡單說

介紹一下最簡單的AJAX模式，看前端如何跟後端溝通，然後讓前端只更新部分畫面，而不會重刷（Reflash），作法很簡單，請先下載範例程式。從client.html中可以看到裡面很簡單，有個按鈕，會觸發JS的function，去做AJAX，而那個JS的function可以從client.js當中看出來，他有一個JQuery提供的,ajax特定格式跟語法。知道了之後，就非常簡單。

利用JQuery提供的,ajax()函式，寫好url : ，告訴程式要呼叫後端哪個PHP，error : 當Ajax失敗，則執行這個函式，看要怎麼顯示給使用者都可以。success : 則是當數值傳回來時要怎麼運作，比方這裡是把#msg那個DIV所包含的子元件替換成PHP回傳的數值：Hello Ajax字串。這樣就不會整頁重刷，而只是更新某些元件，也就即時的更新整個頁面的某一小塊罷了。

還能透過JQuery所提供的 fade in 跟 fade out特效，來達成更完美的更新。

Html下拉選單ComboBox的Width不精準的問題

這是個目前沒有好解法的問題，這相信一般人碰到機會或許不到，因為現在大多數的人排版網頁應該會用相對位置，而非絕對位置，也不太會有老闆跟我老闆一樣，要你一個Pixel也不能歪掉的對齊。（拿尺在螢幕上量是家常便飯）不過既然發生了，我就記錄一下，以免後來忘記。


ComboBox下拉式選單在HTML4的語法是這樣

<select name="thelist" class="Language">
  <option>English</option>
  <option>繁體中文</option>
  <option>簡体中文</option>
</select> 

在HTML5的語法是這樣

<input type=text list=browsers >
<datalist id=browsers >
   <option> Google
   <option> IE9
</datalist>

而HTML5的作法相當彈性，如果按照這個初始值來設定，出來的下拉選單會非常的陽春，而且只是個DropDown元件，可編輯，外觀看起來又像是TextInput元件，所以我採用HTML4的作法。

而我做出這個元件之後，由於要對齊於背景圖，採用絕對位置，所以我需要在JavaScript去計算Left位置，所以我需要去透過JQuery去抓Language這個select元件的寬度，一抓，發現各家瀏覽器抓出來的數值差很大，Chrome跟IE比較接近，但稍有幾個Pixels的誤差，而Safari差的可多了，造成計算位置大錯誤。
解法：

我原本是不設定此物件的寬度，由文字個數跟Font-Size來決定寬度就好，而上述的抓寬度出來的數值錯誤，只好改為，我在CSS當中自己先設定了Width，（當然，這裡要實驗個幾次，在各瀏覽器確實都能正確顯示，這寬度才合適），然後在JavaScript就不用透過JQuery去抓寬度，而是直接用剛剛的固定寬度來計算就好，這樣才能得到正確的位置。

用Javascript寫Modal Dialog並拖動對話框簡易教學

延續上個例子用Javascript寫Modal Dialog簡易教學
加入底下紅色的程式碼（先不要加上深紅色的程式片段），就可以做到移動視窗，簡單的邏輯是：

1. 在對話框攔截 Mouse Down 事件，記錄當時對話框的位置，與滑鼠位置，與標記「滑鼠已按下」
2. 在對話框攔截 Mouse Move 事件，根據「滑鼠是否按下」來決定是否移動對話框，移動方式為根據 ( [此時滑鼠位置] - [Mouse Down中的滑鼠位置] + [對話框在Mouse Down中的位置] ）來計算出對話框目前應該要在的位置，並且移動之，（透過Java Script
3. 在對話框攔截 Mouse Up 事件，標記「滑鼠已經放開」

這邏輯很簡單，但你會發現一個瑕疵，就是當你滑鼠移動很快，會讓畫面重繪跟不上，你的滑鼠會超出對話框，然後Mouse事件就不會被處理，所以視窗就不再被移動了。

怎麼解決？加上底下深紅色的程式片段，讓佈滿整個頁面的遮罩層也處理Mouse Move跟Mouse Up，就可以解決了。我不知道這個作法是否完美、正規。如果有人知道更好的、更正確的作法，麻煩告訴我喔，謝謝。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

<!-- Script 區段 -->
<script language='JavaScript' type='text/JavaScript'>

$(document).ready(function() 
{
var DivSourceX = 0;
var DivSourceY = 0;
var DivEnvDwX = 0;
var DivEnvDwY = 0;
var DivEnvMvX = 0;
var DivEnvMvY = 0;
var DivMouseFlag = false;    // 用來判斷是否處於滑鼠按著的狀態

// 按下「X」圖隱藏遮罩層
$(".closeDialog").click(function() 
{
ShowModalDialog( false );
});

// 按鈕後顯示遮罩層
$(".btnOpenModal").click(function()
{
ShowModalDialog( true );
});

// 遮罩層控制
function ShowModalDialog( YesOrNo )
{
if ( true == YesOrNo )
{
$(".DivOverlapMask").css( "visibility", "visible" );
$(".DivDialog").css( "visibility", "visible" );
$(".closeDialog").css( "visibility", "visible" );
}
else
{
$(".DivOverlapMask").css( "visibility", "hidden" );
$(".DivDialog").css( "visibility", "hidden" );
$(".closeDialog").css( "visibility", "hidden" );
}
}

// DivDialog 為對話框主體層，需要攔截 Mouse的 Up, Down, Move
$(".DivDialog").mousedown(function(event)
{
DivMouseDown( event );
});

$(".DivDialog").mouseup(function()
{
DivMouseUp( );
});

$(".DivDialog").mousemove(function(event)
{
DivMouseMove( event );
});

// 需要加上遮罩層攔截 Mouse Up 與 Move 才能在「滑鼠意外滑出對話框時，還能繼續移動對話框」
$(".DivOverlapMask").mouseup(function()
{
DivMouseUp( );
});

$(".DivOverlapMask").mousemove(function(event)
{
DivMouseMove( event );
});

// Mouse Down 的時候，紀錄當時視窗的原始位置，滑鼠當時的位置
function DivMouseDown(EvtDw)
{
DivSourceX = $(".DivDialog").position().left;
DivSourceY = $(".DivDialog").position().top;

if ( !EvtDw )
{
EvtDw = window.event;
}

if ( EvtDw.pageX || EvtDw.pageY )
{
DivEnvDwX = EvtDw.pageX;
DivEnvDwY = EvtDw.pageY;
}
else if ( EvtDw.clientX || EvtDw.clientY )
{
DivEnvDwX = EvtDw.clientX;
DivEnvDwY = EvtDw.clientY;
}
else if ( EvtDw.x || EvtDw.y )
{
DivEnvDwX = EvtDw.x;
DivEnvDwY = EvtDw.y;
}

DivMouseFlag = true;
}

function DivMouseUp()
{
DivMouseFlag = false;
}

// Mouse Move 的時候，根據滑鼠的目前位置，原始位置，與物件原始位置，計算，然後將對話框移動到應該去的位置
function DivMouseMove(EvtMv)
{
if ( DivMouseFlag )
{
if ( !EvtMv )
{
EvtMv = window.event;
}

if ( EvtMv.pageX || EvtMv.pageY )
{
DivEnvMvX = EvtMv.pageX;
DivEnvMvY = EvtMv.pageY;
}
else if ( EvtMv.clientX || EvtMv.clientY )
{
DivEnvMvX = EvtMv.clientX;
DivEnvMvY = EvtMv.clientY;
}
else if ( EvtMv.x || EvtMv.y )
{
DivEnvMvX = EvtMv.x;
DivEnvMvY = EvtMv.y;
}

NewDivX = DivSourceX + ( DivEnvMvX - DivEnvDwX );
NewDivY = DivSourceY + ( DivEnvMvY - DivEnvDwY );

$(".DivDialog").css(
{
top: NewDivY + "px",
left: NewDivX + "px"
});

}
}
})
</script>


<!-- CSS 區段 -->  
<style type="text/css">

/* 只是背景 */
.DivGround
{
position: absolute;
width: 400px;
height: 300px;
top: 30px;
left: 30px;
border: solid;
background-color: #66ccff;
text-align:center;
}

/* 遮罩，將整個瀏覽器佈滿，讓原本背景層都無法點選 */
.DivOverlapMask
{
position:fixed;
top:0px;
left:0px;
height:100%;
width:100%;
margin:0;
padding:0;
background:gray;
opacity:0.95;
visibility:hidden;
}

/* Modal Dialog 層 */
.DivDialog
{
position:absolute;
width:200px;
height:100px;
margin:0;
padding:0;
left:100px;
top:100px;
    background-color: #eeaaaa;
border-radius: 10px;
visibility:hidden;
}


/*「X」按鈕 */
.closeDialog
{
position:absolute;
width:32px;
height:32px;
right:8px;
top:8px;
cursor:pointer;
visibility:hidden;
}
</style>


<title>無標題文件</title>
</head>



<body>
    <!-- Modal Dialog 的原理就是在背景層（可以很多層）之上，蓋上一層遮罩，最後給一個DIV當成對
    話框 -->
    
<div class= "DivGround">
        <button class = "btnOpenModal" > 開 啟 </button> 
        <div class = "DivOverlapMask" >
            <div class = "DivDialog" >       
                <img class = "closeDialog" src="img/close-button.png" ></img>            </div>
        </div>
    </div>
</body>
</html>

用Javascript寫Modal Dialog簡易教學

為了讓程式畫面美觀，底下程式碼會稍微多了點，但其實，方法與原理不難。

1. 把網頁主體先完成之後，準備好一個按鈕，或某個觸發的點，可以觸發事件。
2. 在主體層上堆一層「遮罩層」。這層設定寬、高都是100％，然後設定透明度opacity:0.85或0.95（自己看喜歡怎樣的感覺來調整）;然後這層在包含著DIV，這個DIV就是用來當對話框用的，你可以在這個DIV當中繼續包入其他元素，記得要包含個按鈕或圖示可以把對話框「關掉」的。
3. 將「遮罩層」設定好一個控制函式，根據傳入參數來設定「遮罩層」，來把「遮罩層」給隱藏或打開來。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

<!-- Script 區段 -->
<script language='JavaScript' type='text/JavaScript'>


// 按下「X」圖隱藏遮罩層
$(".closeDialog").click(function() 
{
ShowModalDialog( false );
});
// 按鈕後顯示遮罩層
$(".btnOpenModal").click(function()
{
ShowModalDialog( true );
});

function ShowModalDialog( YesOrNo )
{
if ( true == YesOrNo )
{
$(".DivOverlapMask").css( "visibility", "visible" );
$(".DivDialog").css( "visibility", "visible" );
$(".closeDialog").css( "visibility", "visible" );
}
else
{
$(".DivOverlapMask").css( "visibility", "hidden" );
$(".DivDialog").css( "visibility", "hidden" );
$(".closeDialog").css( "visibility", "hidden" );
}
}

})
</script>


<!-- CSS 區段 -->  
<style type="text/css">

/* 只是背景 */
.DivGround
{
position: absolute;
width: 400px;
height: 300px;
top: 30px;
left: 30px;
border: solid;
background-color: #66ccff;
text-align:center;
}

/* 遮罩，將整個瀏覽器佈滿，讓原本背景層都無法點選 */
.DivOverlapMask
{
position:fixed;
top:0px;
left:0px;
height:100%;
width:100%;
margin:0;
padding:0;
background:gray;
opacity:0.85;
filter: alpha(opacity=85);
-moz-opacity: 0.85;
visibility:hidden;
}

/* Modal Dialog 層 */
.DivDialog
{
position:fixed;
width:200px;
height:100px;
margin:0;
padding:0;
left:100px;
top:100px;
    background-color: #eeaaaa;
border-radius: 10px;
visibility:hidden;
}


/*「X」按鈕 */
.closeDialog
{
position:absolute;
width:32px;
height:32px;
right:8px;
top:8px;
cursor:pointer;
visibility:hidden;
}
</style>


<title>無標題文件</title>
</head>



<body>
    <!-- Modal Dialog 的原理就是在背景層（可以很多層）之上，蓋上一層遮罩，最後給一個DIV當成對
    話框 -->
    
<div class= "DivGround">
        <button class = "btnOpenModal" > 開 啟 </button> 
        <div class = "DivOverlapMask" >
            <div class = "DivDialog">       
                <img class = "closeDialog" src="img/close-button.png" ></img>            </div>
        </div>
    </div>
</body>
</html>