在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，如果需要在Web應(yīng)用中顯示簡(jiǎn)短的信息提示，或者向訪問者詢問，可以有兩種方式：一是使用JavaScript原生的對(duì)話框，如alert()或者confirm()方法等，另一種方法是打開一個(gè)新的頁(yè)面，預(yù)先定義好尺寸，并且將其樣式設(shè)置為對(duì)話框風(fēng)格。不過(guò)，在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，JavaScript提供的原生方法既不靈活，也不巧妙，它們?cè)诮鉀Q一個(gè)問題的同時(shí)，通常會(huì)產(chǎn)生新的問題。

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

【操作步驟】

第1步，啟動(dòng)Dreamweaver，打開本節(jié)示例中的orig.html文件，另存為effect.html。在本示例中將在頁(yè)面中插入一個(gè)按鈕圖標(biāo)，單擊該按鈕圖標(biāo)可以打開模態(tài)對(duì)話框。

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

第3步，選中插入的圖像，打開【行為】面板，為當(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ì)話框。

第5步，使用鼠標(biāo)單擊選中Dialog面板，可以在【屬性】面板中設(shè)置對(duì)話框的相關(guān)屬性，同時(shí)可以在編輯窗口中修改對(duì)話框面板的內(nèi)容。

（1）ID文本框：設(shè)置對(duì)話框外包含框div元素的ID屬性值，以方便JavaScript腳本控制。圖7.68　設(shè)置相關(guān)屬性

（2）Title文本框：設(shè)置對(duì)話框的標(biāo)題。

（3）Position下拉列表框：設(shè)置對(duì)話框在瀏覽器窗口中的顯示位置，默認(rèn)為center（中央），包括left、right、top和bottom選項(xiàng)。

（4）Width和Height文本框：設(shè)置對(duì)話框的寬度和高度。

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

（6）Auto Open復(fù)選框：是否自動(dòng)打開對(duì)話框。

（7）Draggable復(fù)選框：是否允許鼠標(biāo)拖動(dòng)對(duì)話框。

（8）Modal復(fù)選框：是否開啟遮罩模式，在遮罩模式下用戶只能在關(guān)閉對(duì)話框后才能夠繼續(xù)操作頁(yè)面。

（9）Close On Escape復(fù)選框：是否允許使用Escape鍵關(guān)閉對(duì)話框。

（10）Resizable復(fù)選框：是否允許調(diào)整對(duì)話框大小。

（11）Hide和Show下拉列表框：設(shè)置對(duì)話框隱藏和顯示時(shí)的動(dòng)畫效果。

（12）Trigger Button下拉列表框：設(shè)置觸發(fā)對(duì)話框的按鈕對(duì)象。

（13）Trigger Event下拉列表框：設(shè)置觸發(fā)對(duì)話框的事件。

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

第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ì)話框的行為。

<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ì)話框。　模態(tài)對(duì)話框預(yù)覽效果

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