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