我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线：400-028-6601
网站建设知识
十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决
jqueryui（三）弹出窗口dialog
jquery ui 提供了强大的dialog功能，基本能满足开发的功能。
成都创新互联公司主要从事成都做网站、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务会泽,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575
一、先上一个简单的例子：
1、代码如下
这是一个弹出窗口---from ifxoxo.com
2、效果截图
jquery-ui-dialog截图 –ifxoxo.com
二、具体用法还是简单的，总结如下：
1、需要加载的js和css
请记住jquery 一定要在jquery-ui之前加载，加载错的会导致意想不到的结果。
（1）jquery
（2）jquery-ui
（3）jquery-ui的css
2、页面上的html
页面上需要一个装dialog的容器，需要一个固定ID,控制弹出窗口的内容，而html有两种方式：
（1）事先写在页面上（比如一个table,form）
.......
这里是窗口里面显示的内容 --ifxoxo.com
（2）不同情况的加载内容，可以定义一个空标签，待js加载 (或者ajax加载)
3、触发窗口弹出的js
主要函数如下：$(“dialog_div”).dialog();
dialog函数有一个强大的参数库，如下
【参数】
| 参数 | 默认值 | 作用 |
| autoOpen | true | 是否自动打开dialog窗口。当属性为false的时候，一开始隐藏窗口， 直到.dialog(“open”)的时候才弹出dialog窗口 |
| buttons | {} | 显示一个按钮，并写上按钮的文本，设置按钮点击函数 |
| closeOnEscpe | true | 是否点击键盘ESC键关闭dialog |
| dialogClass | null | 为窗口加上的class属性 |
diaggable resizable | true | 是否能拖动、缩放 （必须加载相应的js） |
width height | auto | 窗口的长宽 |
maxWidth maxHeight | null | 长宽的最大值 |
minWidth minHeight | 150 | 长宽的最小值 |
hide show | null | 当dialog关闭和打开时候的效果。（必须加载相应的jquery.effects.xx.js） 效果有：blind,bounce,clip,drop,explode,fade,fold,
highlight,pulsate,puff,slide,scale,size,shake,transfer
|
| modal | false | 是否使用模式窗口，模式窗口打开后，页面其他元素将不能点击，直到关闭模式窗口 |
| title | null | dialog的标题文字 |
| position | center | dialog的显示位置：可以是’center’, ‘left’, ‘right’,
‘top’, ‘bottom’,
也可以是top和left的偏移量,
也可以是一个字符串数组例如['right','top']。
|
| zIndex | 1000 | dialog的zindex值 |
| stack | true | 是否在dialog获得焦点是，dialog将在最上面 |
| bgiframe | false | 在IE6下，让后面那个灰屏盖住select(需要调用jquery.bgiframe.js) |
| disabled | false | 当为true是，关掉这个dialog |
示例代码如下：
4、其他
1、事件
(1) beforeclose当dialog尝试关闭的时候此事件将被触发，如果返回false，那么关闭将被阻止
(2) close关闭dialog的时候此事件将被触发
(3) open打开dialog的时候此事件将被触发
(4) focus获得焦点的时候此事件将被触发
(5) dragStart开始拖动dialog的时候此事件将被触发
(6) drag拖动dialog过程此事件将被触发
(7) resizeStart开始缩放dialog的时候此事件将被触发
(8) resize缩放dialog过程的时候此事件将被触发
(9) resizeStop缩放结束的时候此事件将被触发
$('.selector').dialog({
beforeclose:function(event, ui){ ... }
});
2、方法
(1)destroy摧毁 例：.dialog( ‘destroy’ )
(2)disabledialog不可用，例：.dialog(‘disable’);
(3)enabledialog可用，
(4)close，open关闭、打开dialog
(5)option设置和获取dialog属性，
例如：.dialog( ‘option’ , optionName , [value] ) ，如果没有value，将是获取。
(6)isOpen如果dialog打开则返回true，例如：.dialog(‘isOpen’)
(7)moveToTop将dialog移到最上层，例如：.dialog( ‘moveToTop’ )。
//点击 opener时，窗口打开
$("#opener").click(function(){
$("#dialog").dialog("open");
returnfalse;
});
});
三、其他相关联文章
1、jquery ui（一）简介
2、jquery ui（二）拖拽 draggable和droppable
3、jquery ui（三）弹出窗口 dialog
4、jquery ui（四）进度条 progressbar
5、jquery ui（五）日期选择器 datepicker
分享文章：jqueryui（三）弹出窗口dialog
文章分享：http://shouzuofang.com/article/jcogjs.html