在網頁設計時，如果需要在Web應用中顯示簡短的信息提示，或者向訪問者詢問，可以有兩種方式：一是使用JavaScript原生的對話框，如alert()或者confirm()方法等，另一種方法是打開一個新的頁面，預先定義好尺寸，并且將其樣式設置為對話框風格。不過，在網頁設計時，JavaScript提供的原生方法既不靈活，也不巧妙，它們在解決一個問題的同時，通常會產生新的問題。

jQuery UI提供了更多功能和更加豐富特性的對話框組件，該對話框組件可以顯示消息，附加內容（如圖片或文字等），甚至包括交互型內容（如表單），為對話框添加按鈕也更加容易，如簡單的【確定】和【取消】按鈕，并且可以為這些按鈕定義回調函數，以便在它們被單擊時做出反應。

【操作步驟】

第1步，啟動Dreamweaver，打開本節示例中的orig.html文件，另存為effect.html。在本示例中將在頁面中插入一個按鈕圖標，單擊該按鈕圖標可以打開模態對話框。

第2步，把光標置于頁面所在位置，然后插入圖像images/out.png，命名為help。

第3步，選中插入的圖像，打開【行為】面板，為當前圖像綁定交換圖像行為，詳細設置如圖7.66所示。綁定行為之后，在【行為】面板中設置觸發事件，交換圖像為onMouseOver，恢復交換圖像為onMouseOut，即設計當鼠標經過圖像時，能夠動態顯示圖像交換效果。

第4步，在頁面內單擊，把光標置于頁面內，不要選中任何對象，然后選擇【插入】|jQuery UI|Dialog命令，在頁面當前位置插入一個模態對話框。

第5步，使用鼠標單擊選中Dialog面板，可以在【屬性】面板中設置對話框的相關屬性，同時可以在編輯窗口中修改對話框面板的內容。

（1）ID文本框：設置對話框外包含框div元素的ID屬性值，以方便JavaScript腳本控制。圖7.68　設置相關屬性

（2）Title文本框：設置對話框的標題。

（3）Position下拉列表框：設置對話框在瀏覽器窗口中的顯示位置，默認為center（中央），包括left、right、top和bottom選項。

（4）Width和Height文本框：設置對話框的寬度和高度。

（5）Min Width、Min Height、Max Width和Max Height文本框：設置對話框最小寬度、最小高度、最大寬度和最大高度。

（6）Auto Open復選框：是否自動打開對話框。

（7）Draggable復選框：是否允許鼠標拖動對話框。

（8）Modal復選框：是否開啟遮罩模式，在遮罩模式下用戶只能在關閉對話框后才能夠繼續操作頁面。

（9）Close On Escape復選框：是否允許使用Escape鍵關閉對話框。

（10）Resizable復選框：是否允許調整對話框大小。

（11）Hide和Show下拉列表框：設置對話框隱藏和顯示時的動畫效果。

（12）Trigger Button下拉列表框：設置觸發對話框的按鈕對象。

（13）Trigger Event下拉列表框：設置觸發對話框的事件。

第6步，按步驟所示設置完畢，保存文檔，則Dreamweaver會彈出對話框，要求保存相關的技術支持文件。單擊【確定】按鈕關閉該對話框即可。

第7步，切換到【代碼】視圖，可以看到Dreamweaver自動生成的腳本。

<script type="text/javascript">$(function() {    

$( "#Dialog1" ).dialog({        

modal:true,        

autoOpen:false,        

title:"幫助中心",        

minWidth:300,        

width:600,        

height:400,

minHeight:300,        

maxHeight:800,        

maxWidth:1024    });});</script>

第8步，在$(function() {}函數體內增加如下代碼，為交換圖像綁定激活對話框的行為。

<script type="text/javascript">$(function() {    

$( "#Dialog1" ).dialog({    });    

$( "#help" ).click(function() {        

$( "#Dialog1" ).dialog( "open" );    });});

</script>

第9步，按Ctrl+S快捷鍵保存文檔，然后按F12鍵預覽，當單擊幫助圖標時，會自動顯示一個模態對話框?！∧B對話框預覽效果

提示：在網站建設時，對話框組件帶有內建模式，在默認情況下是非激活的，而一旦模式被激活，將會啟用一個模式覆蓋層元素，覆蓋對話框的父頁面。而對話框將會位于該覆蓋層的上面，同時頁面的其他部分將位于覆蓋層的下面。這個特性的好處是可以確保對話框被關閉之前，父頁面不能夠進行交互，并且為要求訪問者在進一步操作前必須關閉對話框提供了一個清晰的視覺指標。改變對話框的皮膚使之與內容相適應是很容易的，可以從默認的主題樣式表（jquery.ui.dialog.css）中進行修改，也可以自定義對話框樣式表。