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("你按下了其他按钮");
                }            
            }
        });
    }