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