在網(wǎng)頁設(shè)計時，如果需要在Web應(yīng)用中顯示簡短的信息提示，或者向訪問者詢問，可以有兩種方式：一是使用JavaScript原生的對話框，如alert()或者confirm()方法等，另一種方法是打開一個新的頁面，預(yù)先定義好尺寸，并且將其樣式設(shè)置為對話框風(fēng)格。不過，在網(wǎng)頁設(shè)計時，JavaScript提供的原生方法既不靈活，也不巧妙，它們在解決一個問題的同時，通常會產(chǎn)生新的問題。
jQuery UI提供了更多功能和更加豐富特性的對話框組件，該對話框組件可以顯示消息，附加內(nèi)容（如圖片或文字等），甚至包括交互型內(nèi)容（如表單），為對話框添加按鈕也更加容易，如簡單的【確定】和【取消】按鈕，并且可以為這些按鈕定義回調(diào)函數(shù)，以便在它們被單擊時做出反應(yīng)。
【操作步驟】
第1步，啟動Dreamweaver，打開本節(jié)示例中的orig.html文件，另存為effect.html。在本示例中將在頁面中插入一個按鈕圖標(biāo)，單擊該按鈕圖標(biāo)可以打開模態(tài)對話框。
第2步，把光標(biāo)置于頁面所在位置，然后插入圖像images/out.png，命名為help。
第3步，選中插入的圖像，打開【行為】面板，為當(dāng)前圖像綁定交換圖像行為，詳細設(shè)置如圖7.66所示。綁定行為之后，在【行為】面板中設(shè)置觸發(fā)事件，交換圖像為onMouseOver，恢復(fù)交換圖像為onMouseOut，即設(shè)計當(dāng)鼠標(biāo)經(jīng)過圖像時，能夠動態(tài)顯示圖像交換效果。
第4步，在頁面內(nèi)單擊，把光標(biāo)置于頁面內(nèi)，不要選中任何對象，然后選擇【插入】|jQuery UI|Dialog命令，在頁面當(dāng)前位置插入一個模態(tài)對話框。
第5步，使用鼠標(biāo)單擊選中Dialog面板，可以在【屬性】面板中設(shè)置對話框的相關(guān)屬性，同時可以在編輯窗口中修改對話框面板的內(nèi)容。
（1）ID文本框：設(shè)置對話框外包含框div元素的ID屬性值，以方便JavaScript腳本控制。圖7.68 設(shè)置相關(guān)屬性
（2）Title文本框：設(shè)置對話框的標(biāo)題。
（3）Position下拉列表框：設(shè)置對話框在瀏覽器窗口中的顯示位置，默認為center（中央），包括left、right、top和bottom選項。
（4）Width和Height文本框：設(shè)置對話框的寬度和高度。
（5）Min Width、Min Height、Max Width和Max Height文本框：設(shè)置對話框最小寬度、最小高度、最大寬度和最大高度。
（6）Auto Open復(fù)選框：是否自動打開對話框。
（7）Draggable復(fù)選框：是否允許鼠標(biāo)拖動對話框。
（8）Modal復(fù)選框：是否開啟遮罩模式，在遮罩模式下用戶只能在關(guān)閉對話框后才能夠繼續(xù)操作頁面。
（9）Close On Escape復(fù)選框：是否允許使用Escape鍵關(guān)閉對話框。
（10）Resizable復(fù)選框：是否允許調(diào)整對話框大小。
（11）Hide和Show下拉列表框：設(shè)置對話框隱藏和顯示時的動畫效果。
（12）Trigger Button下拉列表框：設(shè)置觸發(fā)對話框的按鈕對象。
（13）Trigger Event下拉列表框：設(shè)置觸發(fā)對話框的事件。
第6步，按步驟所示設(shè)置完畢，保存文檔，則Dreamweaver會彈出對話框，要求保存相關(guān)的技術(shù)支持文件。單擊【確定】按鈕關(guān)閉該對話框即可。
第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() {}函數(shù)體內(nèi)增加如下代碼，為交換圖像綁定激活對話框的行為。
<script type="text/javascript">$(function() {
$( "#Dialog1" ).dialog({ });
$( "#help" ).click(function() {
$( "#Dialog1" ).dialog( "open" ); });});
</script>
第9步，按Ctrl+S快捷鍵保存文檔，然后按F12鍵預(yù)覽，當(dāng)單擊幫助圖標(biāo)時，會自動顯示一個模態(tài)對話框?！∧B(tài)對話框預(yù)覽效果
提示：在網(wǎng)站建設(shè)時，對話框組件帶有內(nèi)建模式，在默認情況下是非激活的，而一旦模式被激活，將會啟用一個模式覆蓋層元素，覆蓋對話框的父頁面。而對話框?qū)挥谠摳采w層的上面，同時頁面的其他部分將位于覆蓋層的下面。這個特性的好處是可以確保對話框被關(guān)閉之前，父頁面不能夠進行交互，并且為要求訪問者在進一步操作前必須關(guān)閉對話框提供了一個清晰的視覺指標(biāo)。改變對話框的皮膚使之與內(nèi)容相適應(yīng)是很容易的，可以從默認的主題樣式表（jquery.ui.dialog.css）中進行修改，也可以自定義對話框樣式表。