JSP中JQuery UI Dialog弹窗使用具体操作

1、简要说明

关于JQuery-UI-Dialog的使用说明确实不少，但是很多文章说明的不够详细。
这样就导致了很多像我一样的新手，虽然按照人家写的做了，但是仍然跟人家做的不一样。
有鉴于此，我就把自己刚刚进行过的操作的具体步骤写一篇文章，以飨新人。

**注意：这里说的是JQuery-UI-Dialog，不是Jquery-easyUI-Dialog。**

2、引入JavaScript文件和CSS样式

使用JQuery-UI-Dialog需要引入必要的js文件盒css样式文件。
(1)首先引入css样式文件：
jquery-ui-1.8.4\themes\base/jquery-ui.css
jquery-ui-1.8.4/themes/base/jquery.ui.dialog.css，
这两个文件在jquery-ui解压后的文件夹中；
(2)引入js文件：
jquery-1.8.2.min.js，
jquery-ui-1.8.4.custom.min.js,
jquery-ui-1.8.4\ui\jquery.ui.dialog.js。

3、建立弹窗用div块

在JSP页面的body标签中任意位置（我个人建议是是开头或者结尾），建立一个空的div块，添加样式为隐藏。例如我的div代码如下：

<div title="标题栏" id="div1" name="div1" style="display: none; padding:0; border:0; margin-top:25px;">
//如果你需要直接弹窗东西的话可以直接在这儿写
</div>

4、弹窗函数

$(function(){
//给弹窗加了个单选框
var array = {"男":"","女":""};
var content = "请选择您的性别：";
for(var i=0; i<array.length; i++){
content += "<input type='radio' id='sex' name='sex'value='"+i+"'/>";
content += "<span>"+array[i]+"</span><br/>";
}
$("#div1").html(content);
});
function showdialog(){
$("#div1").dialog({
width:300,
height:270,
closeOnEscape:false,//右上角没有叉号
//↑↑↑在弹窗右上角不显示关闭按钮，如果要用右上角的关闭就是true或者不写这个属性
modal:true,//弹窗的时候不能动页面的其他地方（模态模式）
create:function(e, ui){//开始执行的方法，用来处理弹出时事件
//给单选按钮加上默认选项
$("#sex").each(
if($(this).val()==1){
$(this).attr("checked",true);
}
);
},
buttons:{//设置页面的按钮
//按钮的名字:对应的方法
"确认":function(){
var checkoption = $("input:radio[name='sex']:checked").next().text();
//获取选中的选项
var checkval = $("input:radio[name='sex']:checked").val();
//对应的值
alert("您选中的性别："+checkoption+"，对应的值为："+checkval);
},
"关闭":function(){
$(this).dialog("close");//关闭当前弹窗
}
"其他":function(){
alert("你按下了其他按钮");
}
}
});
}