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);

 

转载于:https://www.cnblogs.com/Crysta1/p/6236985.html