dialog屬性詳解
常用屬性
1.autoOpen：這個屬性爲true的時候dialog被調用的時候自動打開dialog窗口。當屬性爲false的時候，一開始隱藏窗口，調用dialog(“open”)的時候才彈出dialog窗口。默認爲：true。
2.position：dialog的顯示位置：可以是’center’, ‘left’, ‘right’, ‘top’, ‘bottom’,也可以是top和left的偏移量也可以是一個字符串數組例如['right','top']。
3.title：dialog的標題，默認爲空。
4.modal：是否使用模式窗口，模式窗口打開後，頁面其他元素將不能點擊，直到關閉模式窗口。默認爲false不是模式窗口。
5.closeOnEscape： 爲true的時候，點擊鍵盤ESC鍵關閉dialog，默認爲true。
6.draggable：draggable是否可以使用標題頭進行拖動，默認爲true，可以拖動。
7.resizable：resizable是否可以改變dialog的大小，默認爲true，可以改變大小。
8.buttons：以對象鍵值對方式，給dialog 添加按鈕。鍵是按鈕的名稱，值是用戶點擊後調用的回調函數。
9.width：300/數值 對話框的寬度。默認爲300，單位是像素。
10.height ：auto/數值 對話框的高度。默認爲auto，單位是像素。
11.minWidth ：150/數值 對話框的最小寬度。默認150，單位是像素。
12.minHeight ：150/數值 對話框的最小高度。默認150，單位是像素。
13.maxWidth ：auto/數值 對話框的最大寬度。默認auto，單位是像素。
14.maxHeight ：auto/數值 對話框的最大高度。默認auto，單位是像素。
15.show ：false/布爾值 顯示對話框時，默認採用淡入效果。
16.hide ：false 布爾值 關閉對話框時，默認採用淡出效果。
show 和hide 可選特效
特效名稱 說明
blind 對話框從頂部顯示或消失
bounce 對話框斷斷續續地顯示或消失，垂直運動
clip 對話框從中心垂直地顯示或消失
slide 對話框從左邊顯示或消失
drop 對話框從左邊顯示或消失，有透明度變化
fold 對話框從左上角顯示或消失
highlight 對話框顯示或消失，伴隨着透明度和背景色的變化
puff 對話框從中心開始縮放。顯示時“收縮”，消失時“生長”
scale 對話框從中心開始縮放。顯示時“生長”，消失時“收縮”
pulsate 對話框以閃爍形式顯示或消失
例：$('#reg').dialog({
show : 'blind',
hide : 'blind'
});
常用方法
1·open：打開dialog，一句話$(“#id”).dialog(“open”)。
2·close：關閉dialog，一句話 $(“#id”).dialog(“close”)。
3·disable：設置dialog不可用。
4·enable： 設置dialog可用。
5·isOpen： 判斷dialog是否爲打開狀態，如果處於打開狀態，返回true。
6·destroy： 銷燬dialog。
7·moveToTop：將dialog移到最上層。
8·option：用於設置和取出dialog的值，比如我們爲dialog設置標題，代碼：$(“#dialogDiv”).dialog(“option”, “title”, “登錄”)
9.focus：當對話框被激活時（首次顯示以及每次在上面點擊）會調用focus 方法，該方法有兩個參數(event, ui)。此事件中的ui 參數爲空。
10.create：當對話框被創建時會調用create 方法，該方法有兩個參數(event, ui)。此事件中的ui 參數爲空。
11.beforeClose：當對話框將要關閉時（ 當單擊關閉按鈕或調用dialog('close')方法），會調用beforeclose 方法。如果該函數返回false，對話框將不會被關閉。關閉的對話框可以用dialog('open')重新打開。該方法有兩個參數(event, ui)。此事件中的ui 參數爲空。
12.drag：當對話框移動時，每次移動一點均會調用drag 方法。該方法有兩個參數。該方法有兩個參數(event, ui)。
此事件中的ui 有兩個屬性對象：
1.position，得到當前移動的座標，有兩個子屬性：top 和left。
2.offset，得到當前移動的座標，有兩個子屬性：top 和left。
13.dragStart：當開始移動對話框時，會調用dragStart 方法。該方法有兩個參數(event, ui)。
此事件中的ui 有兩個屬性對象：
1.position，得到當前移動的座標，有兩個子屬性：top 和left。
2.offset，得到當前移動的座標，有兩個子屬性：top 和left。
14.dragStop：當開始移動對話框時，會調用dragStop 方法。該方法有兩個參數(event, ui)。
此事件中的ui 有兩個屬性對象：
1.position，得到當前移動的座標，有兩個子屬性：top 和left。
2.offset，得到當前移動的座標，有兩個子屬性：top 和left。
15.resize：當對話框拉昇大小的時候，每一次拖拉都會調用resize方法。該方法有兩個參數(event, ui)。
此事件中的ui 有四個屬性對象：
1.size，得到對話框的大小，有兩個子屬性：width 和height。
2.position，得到對話框的座標，有兩個子屬性：top 和left。
3.originalSize，得到對話框原始的大小，有兩個子屬性：width 和height。
4.originalPosition，得到對話框原始的座標，有兩個子屬性：top 和left。
16.resizeStart：當開始拖拉對話框時，會調用resizeStart 方法。該方法有兩個參數(event, ui)。
此事件中的ui 有四個屬性對象：
1.size，得到對話框的大小，有兩個子屬性：width 和height。
2.position，得到對話框的座標，有兩個子屬性：top 和left。
3.originalSize，得到對話框原始的大小，有兩個子屬性：width 和height。
4.originalPosition，得到對話框原始的座標，有兩個子屬性：top 和left。
17.resizeStop：當結束拖拉對話框時，會調用resizeStart 方法。該方法有兩個參數(event, ui)。
此事件中的ui 有四個屬性對象：
1.size，得到對話框的大小，有兩個子屬性：width 和height。
2.position，得到對話框的座標，有兩個子屬性：top 和left。
3.originalSize，得到對話框原始的大小，有兩個子屬性：width 和height。
4.originalPosition，得到對話框原始的座標，有兩個子屬性：top 和left。
dialog 中使用on()
在dialog 的事件中，提供了使用on()方法處理的事件方法。
on()方法觸發的對話框事件
特效名稱 說明
dialogfocus 得到焦點時觸發
dialogopen 顯示時觸發
dialogbeforeclose 將要關閉時觸發
dialogclose 關閉時觸發
dialogdrag 每一次移動時觸發
dialogdragstart 開始移動時觸發
dialogdragstop 移動結束後觸發
dialogresize 每次調整大小時觸發
dialogresizestart 開始調整大小時觸發
dialogresizestop 結束調整大小時觸發
例：$('#reg').on('dialogclose', function () {
alert('關閉');
});
實例（完整）：
1.導入包
<link rel="stylesheet" type="text/css" href="../CSS/jquery-ui.css" />
<script type="text/javascript" src="../JS/jquery-3.1.1.js"></script>
<script type="text/javascript" src="../JS/jquery-ui.js"></script>2.js代碼
<script type="text/javascript">
$("#logindiv").dialog({
title : "登陸",
width : 350,
height : 200,
autoOpen : false,//調用.dialog("open");時才顯示
positoin : "center",
modal : true,//模式：不能點擊頁面其他部分
closeOnEscape : true,//ecs關閉有效
draggable : false,
resizable : false,
show : "scale",
hide : "scale",
});$(".quxiao").click(function() {
$("#logindiv").dialog("close");
});
$("#login").click(function() {
$("#logindiv").dialog("open");
});
</script>3.HTML代碼
<div id="logindiv">
<center>
<form name="form"
action="${pageContext.request.contextPath}/MainPageLogin"
method="post">
<table>
<tr>
<td><strong>學號</strong></td>
<td><font color="#ff0000">*</font></td>
<td><input type="text" name="number" id="number" value=""
οnblur="return checknumber()" /></td>
</tr>
<tr>
<td><strong>密碼</strong></td>
<td><font color="#ff0000">*</font></td>
<td><input type="password" name="password" id="password"
value="" /></td>
</tr>
</table>
<hr>
<input type="submit" value="登陸" class="submitbtn" /> <input
type="button" value="取消" class="quxiao" /><br>
</form>
<div id="checknumber"></div>
</center>
</div>
省略
5.效果
