资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

jqueryui（三）弹出窗口dialog

jquery ui 提供了强大的dialog功能，基本能满足开发的功能。

成都创新互联公司主要从事成都做网站、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务会泽,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

一、先上一个简单的例子：

1、代码如下







    这是一个弹出窗口---from ifxoxo.com


2、效果截图

jquery ui（三）弹出窗口 dialog

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

示例代码如下：






这是弹框的内容---ifxoxo.com




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
标题URL：http://www.cdkjz.cn/article/jcogjs.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
高端网站建设手机APP开发成都网站制作成都网站推广成都微信开发成都网站设计成都网站改版网络营销推广柴油发电机租赁绵阳电信机房

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图