在页面开发过程中，经常要与用户进行交互，例如在提交表单时，如果文本框(text)中内容为空，需要提醒用户输入内容，一般的做法是使用传统的javascript语言中的alert()函数弹出一个信息窗口；另外，在删除某项记录时，也需要告知用户确定，可用javascript语言中的confirm()函数，虽然这两个函数都可以实现相应的功能，但没有动画效果，功能单一，用户体验差。在jQuery UI中，通过dialog(对话)插件，不仅完成可以实现传统javascript语言中alert()函数与confirm()函数的功能，而且界面优雅，功能丰富，操作简单。该插件导入页面后，其调用语法格式代码如下：
$(“.selector”).dialog(options)
其中.selector表示DOM元素，一般指定一个<div>标记，用于显示弹出对话框的内容和设置按钮，选项options是一个对象，它常用的参数如下
1、 autoOpen 设置一个布尔值，如果为false，则不显示对话框，默认为true
2、 bgiframe 设置一个布尔值，如果为true，则表示如果在IE6下，弹出的对话框可以遮盖住页面中类似于<select>标记的下拉列表框，默认值为false
3、 buttons 设置对话框中的按钮
4、 closeOnEscape 设置一个布尔值，如果为false。则表示不适应esc快捷键的方式关闭对话框，默认值为true
5、 draggable 设置一个布尔值，表示是否可以拖动对话框，默认为true
6、 hide 设置对话框关闭时的动画效果，可以设置为slide等各种动画效果，默认值为null
7、 model 设置对话框是否以模式的方式显示，模式指的是页面背景变灰，不允许操作，焦点锁定对话框的效果，默认值为center
8、 position 设置对话框弹出时，在页面中的位置，可以设置为top,left,right,bottom,默认值为center
9、 show 设置对话框显示时的动画效果，相关说明与hide参数一样
10、 title 设置对话框中主题部分的文字，默认值为空
实例
<head>
<!-- 引入相应的jQueryUI的类库文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">
<script type="text/javascript">
//页面加载完毕 触发匿名函数
$(document).ready(function() {
//点击事件处理打开dialog对话框
$("#dialog_link").click(function(){
//打开窗口事件
$("#dialog").dialog("open");
return false;//返回值false 不去执行<a href="#">连接的操作
});
$("#dialog").dialog({ //当你把$("#dialog")对象注册为对话框时, $("#dialog")的内容 也将被隐藏掉
autoOpen: false,//设置对话是否打开，false则隐藏，true打开 默认值为true
width:600,//宽度的设置
buttons:{
"确定":function(){
$(this).dialog("close");
},
"取消":function(){
$(this).dialog("close");
}
},
bgiframe:false,
closeOnEscape:false, //当按下esc键的时候关闭窗体
draggable:true, //拖拽的效果 默认是true 可以拖
hide:"toggle", // 关闭窗体时的效果
show:"slide", //动画效果 展开的时候的效果
modal:true, //遮罩效果 默认false不遮罩
position:"top", //对话框弹出的位置 top left right
title:"这里是标题", //设置对话框的标题
open:function(event,ui){
alert("打开的时候触发该事件");
}
});
//添加事件
$("#dialog_link,ul#cons li").hover(
function(){$(this).addClass("ui-state-hover");},
function(){$(this).removeClass("ui-state-hover");}
);
});
</script>
<style type="text/css">
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
</style>
</head>
<body>
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
<!-- ui-dialog -->
<div id="dialog" title="添加用户">
<p>这里可以添加用户啊 </p>
</div>
</body>