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