在网页设计时，如果需要在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键预览，当单击帮助图标时，会自动显示一个模态对话框。　模态对话框预览效果

提示：在网站建设时，对话框组件带有内建模式，在默认情况下是非激活的，而一旦模式被激活，将会启用一个模式覆盖层元素，覆盖对话框的父页面。而对话框将会位于该覆盖层的上面，同时页面的其他部分将位于覆盖层的下面。这个特性的好处是可以确保对话框被关闭之前，父页面不能够进行交互，并且为要求访问者在进一步操作前必须关闭对话框提供了一个清晰的视觉指标。改变对话框的皮肤使之与内容相适应是很容易的，可以从默认的主题样式表（jquery.ui.dialog.css）中进行修改，也可以自定义对话框样式表。