不知道博園的朋友們有沒有發現一個現象，很多的網站是不是跳出一個alert()的對話框，但是從界面的友好性方面考慮，這樣是非常不友好的。暑假中我曾經看過一段微軟的MSDN發布的視屏，視屏的作者是依明志，他在視頻中曾提到，盡量不要用alert()來跳出對話框，理由很簡單，我們來做個測試就知道為什么了。
首先你要一個支持多頁面的瀏覽器，我這里舉例子用的瀏覽器是遨游，其實現在的win7 系統中自帶的IE8、IE9都是符合這個實驗的要求的，當然不是以IE為內核的瀏覽器，像火狐、谷歌也是可以的。所以你隨便選個上面的瀏覽器。
我們新建一個頁面就放一個button按鈕，然后點擊這個按鈕觸發alert事件，此時的頁面效果如圖：
代碼：
1 <html>
2 <head>
3 <title>alert()練習</title>
4 <script type="text/javascript">
5 function alertFun(){
6 alert("1");
7 }
8 </script>
9 </head>
10
11 <body>
12 <input type="button" value="點擊我" onclick="alertFun();" />
13 </body>
14 </html>
緊接着我們不要按確定鍵，此時我們繼續打開第二個頁面，點擊遨游的加號
，你發現了上面。我們開不了了，這就是對界面的友好性是非常不好的。
視屏就像小說一樣，一笑而過了，但是我並沒有放棄思想，放棄實踐，雖然依明志提到了這個不友好型，也告訴了我們解決辦法。但是卻沒有讓我如何編寫代碼。然而我卻自己整理資料，自己試着寫代碼，調試。最后成功了。這里報着分享的態度和園友們一起成長。
這里用到的技術是jquery、css和html語法。如果你沒有學習過這3中語言，我個人建議先自學一下在看本文。不然可能你會看起來會很吃力。
需要的“裝備“：jquery、jqueryUI的包。這里我用的jquery的版本是1.3.2
首先我們在html放上需要觸發事件的對話框，和彈出的對話框。
代碼如下：
1 <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all">
2 <span class="ui-icon ui-icon-newwin"></span>普通對話框
3 </a>
4 </p>
5
6 <div id="dialog" titile="刪除確認">
7 <p>
8 <span class="ui-icon ui-alert" ></span>
9 刪除后將無法還原！你確認要刪除該信息嗎？
10 </p>
11 </div>
12
13 <div id="dialog_Ok" title="成功">
14 <p>
15 <span class="ui-icon ui-icon-info" ; margin:0 7px 50px 0;"></span>
16 刪除成功！
17 </p>
18 </div>
寫好html的代碼的效果圖如下：
接着我們在這里對其進行相應的css布局。因為我這里主要寫的是jquery的文章，所以這里css不在這里做詳細的介紹了。
最后是的效果圖如下：
好了，前面的准備工作都做好了。現在我們要開始我們這篇博客的主題了。
首先我們按照常理在index.html頁面中引入jquery的版本文件，然后在引入jquery UI的版本文件。代碼如下：
1 <script type="text/javascript" src="js/jquery-1.3.2.min.js" ></script>
2 <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
接着為了頁面的整潔，我們自己新建一個js文件，命名為MyDialogJquery.js文件，來存放我們自己寫的js代碼。當然這里一定要注意，我們在引用文件的時候一定要把這個文件放在上面兩個引用文件的后面。舉個例子，我們先調用變量，然后在聲明變量，這樣當然不可以了，會報錯！所以前面的兩個引用文件的目的，你可以理解為在聲明一個jquery的變量，為以后我們可以用jquery語法做好鋪墊，而后面的js文件在前面jquery建立的基礎上創建一個代碼公開的UI操作。最后我們引用自己的js文件然后寫出自己的效果，這其中需要調用jquery和UI文件中的函數（這里為了理解園友們可以這么理解）。
我們把MyDialogJquery.js文件也引進來。
代碼：
1 <script type="text/javascript" src="js/MyDialogJquery.js"></script>
現在我們開始寫jquery代碼了。
一開始我們按照jquery語法。
$(function(){});這里用的是簡寫的方式，當然如果你喜歡全寫，也是無所謂的。我本人比較懶就選擇了簡寫的方式了。
接着我們開始對這3個對話框設置。
這里需要了解.dialog()函數的意思：這里我給出官方的網址，大家如果不明白可以參考看看官的解釋
http://jqueryui.net/dialog/
這里重點介紹一下刪除對話框，因為其他對話框基本是一樣的：
代碼如下：
1 //刪除確認對話框
2 $("#dialog").dialog({
3 autoOpen:false, //設置默認的對框框為關閉
4 bgiframe:true, //是否使用 bgiframe 插件解決 IE6 下無法遮蓋 select 元素問題。
5 modal:true, //是否為模態窗口，設置為 true 時，頁面上其它元素將被覆蓋且無法響應用戶操作。
6 width:400, //設定對話框寬度，像素單位。
7 buttons:{ //設置對話框底部按鈕，對象屬性名為按鈕文本，屬性值為單擊按鈕時的回調函數。
8 "確認":function(){
9 $(this).dialog("close"); //關閉這個對話框
10 $("#dialog_Ok").dialog("open");//打開確認的對話框
11 },
12 "取消":function(){
13 $(this).dialog("close"); //關閉這個對話框
14 }
15 }
16 });
首先我們利用$("#dialog")來找到我們需要操作的對話框，然后調用jquery為我們封裝的dialog()的函數，因為是刪除確認對話框，所有我們一開始設置的時候，應該設置這個對話框藏起來，第二個參數bgiframe用來解決IE6下面下無法遮蓋 select 元素問題。modal這個屬性，是用來設置當我們彈出對話框的時候，別的元素不可用，在我的包里我放了一個button按鈕用來測試這個效果的，你可以試試；width設置對話框的寬度；最后我們需要在這個對話框中話兩個按鈕，一個確定，一個取消，並設置相應的操作。
最后實現的效果如圖：
不知道你會不會了？