JQuery UI dialog 彈窗實例及參數說明

按鈕代碼：

<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.  一個數組，包含兩個以像素爲單位的位置，例如， 

var dialogOpts = {
    position: [100, 100]
};

     3. 一個字符串組成的數組，例如， ['right','top']，表示對話框將會位於窗口的右上角。

var dialogOpts = {
    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   一個對象，屬性名將會被做爲按鈕的提示文字，屬性值爲一個函數，即按鈕的處理函數。

var dialogOpts = {    buttons: {       "Ok": function() { } ,       "Cancel": function() {}    } } $("#myDialog").dialog(dialogOpts);