按鈕代碼:
<a id="suprise" style="margin-left: 0.5em;cursor:pointer;">點我會有驚喜</a>
彈窗顯示內容代碼:
<div id="caidan" title="彩蛋" hidden="hidden"> <table style="border:0px solid red;width:250px"> <tr> <td>序號</td> <td>姓名</td> <td>年齡</td> <td>性別</td> </tr> <tr> <td>1</td> <td>李易峰</td> <td>24</td> <td>男</td> </tr> <tr> <td>2</td> <td>楊洋</td> <td>25</td> <td>男</td> </tr> <tr> <td>3</td> <td>趙雅芝</td> <td>50</td> <td>女</td> </tr> <tr> <td>4</td> <td>何潔</td> <td>30</td> <td>女</td> </tr> </table> </div>
js代碼:
$("#suprise").click(function(){ $("#caidan").dialog({ buttons:{ "確定":function(){}, "取消":function(){$(this).dialog('close');} } }) })
效果:
參數說明:
初始化參數
對於 dialog 來說,首先需要進行初始化,在調用 dialog 函數的時候,如果沒有傳遞參數,或者傳遞了一個對象,那么就表示在初始化一個對話框。
沒有參數,表示按照默認的設置初始化對話框,在當前最新版本的 jQuery UI 1.8.9 中, dialog 支持下列屬性。
autoOpen 初始化之后,是否立即顯示對話框,默認為 true
modal 是否模式對話框,默認為 false
closeOnEscape 當用戶按 Esc 鍵之后,是否應該關閉對話框,默認為 true
draggable 是否允許拖動,默認為 true
resizable 是否可以調整對話框的大小,默認為 true
title 對話框的標題,可以是 html 串,例如一個超級鏈接。
position 用來設置對話框的位置,有三種設置方法
1. 一個字符串,允許的值為 'center', 'left', 'right', 'top', 'bottom'. 此屬性的默認值即為 'center',表示對話框居中。
2. 一個數組,包含兩個以像素為單位的位置,例如,
position: [100, 100]
};
3. 一個字符串組成的數組,例如, ['right','top'],表示對話框將會位於窗口的右上角。
position: ["left", "bottom"]
};
一組關於尺寸的屬性,以像素為單位。
width 寬度, 默認 300
height 高度,默認 'auto'
minWidth 最小寬度,默認 150
minHeight 最小高度,默認 150
maxWidth 最大寬度
maxHeight 最大高度
還有關於關閉的效果
hide 當對話框關閉時的效果,默認為 null, 例如, hide: 'slide'
show 當對話框打開時的效果。默認為 null
堆疊
stack 對話框是否疊在其他對話框之上。默認為 true
zIndex 對話框的 z-index 值,一個整數,越大越在上面。默認 1000
按鈕
buttons 一個對象,屬性名將會被作為按鈕的提示文字,屬性值為一個函數,即按鈕的處理函數。
buttons: {
"Ok": function() { } ,
"Cancel": function() {}
}
}
$("#myDialog").dialog(dialogOpts);