部件

动画

UI/API/1.7/Dialog

概述
参数
事件
方法
主题

jQuery UI Dialog

一个dialog是一个浮动的包含标题栏和内容区域的窗口. 默认的dialog窗口可以被拖动, 改变大小和使用'x'图标关闭.

加入内容的长度超出了最大的高度, 将会自动添加一个滚动条.

一个底部的按钮栏和一个半透明的覆盖层是最常用的添加方式.

其他附加文件

UI Core
UI Draggable (Optional)
UI Resizable (Optional)

示例

代码示范
查看源文件

一个简单的 jQuery UI Dialog.

$("#dialog").dialog();

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="ui/ui.core.js"></script>
  <script type="text/javascript" src="ui/ui.draggable.js"></script>
  <script type="text/javascript" src="ui/ui.resizable.js"></script>
  <script type="text/javascript" src="ui/ui.dialog.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#dialog").dialog();
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<div id="dialog" title="Dialog Title">I'm in a dialog</div>

</body>
</html>

autoOpen

类型:

Boolean

默认值:

true

当 autoOpen 设置为 true时 dialog 会在呼叫时自动打开. 如果为 false 它将会继续隐藏直到显示的调用 .dialog("open") .
代码示例
使用指定的autoOpen参数初始化一个dialog.
```
$('.selector').dialog({ autoOpen: false });
```
在初始化后设置或者获取autoOpen参数.
```
//获取
var autoOpen = $('.selector').dialog('option', 'autoOpen');
//设置
$('.selector').dialog('option', 'autoOpen', false);
```
bgiframe

类型:

Boolean

默认值:

false

设置为true时, 将会使用 bgiframe 插件, 去修正在IE6中select元素始终位于其他元素之上的问题. 需要加载 bgiframe 插件. 将来的版本可能会依赖于其他的插件.
代码示例
使用指定的bgiframe参数初始化一个dialog.
```
$('.selector').dialog({ bgiframe: true });
```
在初始化后设置或者获取bgiframe参数.
```
//获取
var bgiframe = $('.selector').dialog('option', 'bgiframe');
//设置
$('.selector').dialog('option', 'bgiframe', true);
```
buttons

类型:

Object

默认值:

{ }

指定哪个按钮显示在dialog上. 这个属性是按钮的文本标识. 值是点击按钮后执行的回调函数. 回调的环境是dialog元素; 如果你需要访问该按钮, 它可以作为目标的事件对象.
代码示例
使用指定的buttons参数初始化一个dialog.
```
$('.selector').dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });
```
在初始化后设置或者获取buttons参数.
```
//获取
var buttons = $('.selector').dialog('option', 'buttons');
//设置
$('.selector').dialog('option', 'buttons', { "Ok": function() { $(this).dialog("close"); } });
```
closeOnEscape

类型:

Boolean

默认值:

true

指定dialog是否在其获得焦点并且当用户按下esacpe (ESC)键时关闭.
代码示例
使用指定的closeOnEscape参数初始化一个dialog.
```
$('.selector').dialog({ closeOnEscape: false });
```
在初始化后设置或者获取closeOnEscape参数.
```
//获取
var closeOnEscape = $('.selector').dialog('option', 'closeOnEscape');
//设置
$('.selector').dialog('option', 'closeOnEscape', false);
```
dialogClass

类型:

String

默认值:

''

将指定的样式添加到dialog中以提供更多的主题.
代码示例
使用指定的dialogClass参数初始化一个dialog.
```
$('.selector').dialog({ dialogClass: 'alert' });
```
在初始化后设置或者获取dialogClass参数.
```
//获取
var dialogClass = $('.selector').dialog('option', 'dialogClass');
//设置
$('.selector').dialog('option', 'dialogClass', 'alert');
```
draggable

类型:

Boolean

默认值:

true

如果设置为true,dialog将可以使用标题栏实现拖动.
代码示例
使用指定的draggable参数初始化一个dialog.
```
$('.selector').dialog({ draggable: false });
```
在初始化后设置或者获取draggable参数.
```
//获取
var draggable = $('.selector').dialog('option', 'draggable');
//设置
$('.selector').dialog('option', 'draggable', false);
```
height

类型:

Number

默认值:

'auto'

指定dialog的高度,单位像素.
代码示例
使用指定的height参数初始化一个dialog.
```
$('.selector').dialog({ height: 530 });
```
在初始化后设置或者获取height参数.
```
//获取
var height = $('.selector').dialog('option', 'height');
//设置
$('.selector').dialog('option', 'height', 530);
```
hide

类型:

String

默认值:

null

为dialog关闭时指定一个动画效果.
代码示例
使用指定的hide参数初始化一个dialog.
```
$('.selector').dialog({ hide: 'slide' });
```
在初始化后设置或者获取hide参数.
```
//获取
var hide = $('.selector').dialog('option', 'hide');
//设置
$('.selector').dialog('option', 'hide', 'slide');
```
maxHeight

类型:

Number

默认值:

false

设定一个dialog可以被调整的最大高度,单位像素.
代码示例
使用指定的maxHeight参数初始化一个dialog.
```
$('.selector').dialog({ maxHeight: 400 });
```
在初始化后设置或者获取maxHeight参数.
```
//获取
var maxHeight = $('.selector').dialog('option', 'maxHeight');
//设置
$('.selector').dialog('option', 'maxHeight', 400);
```
maxWidth

类型:

Number

默认值:

false

为dialog设置一个可以被调整的最大宽度,单位像素.
代码示例
使用指定的maxWidth参数初始化一个dialog.
```
$('.selector').dialog({ maxWidth: 600 });
```
在初始化后设置或者获取maxWidth参数.
```
//获取
var maxWidth = $('.selector').dialog('option', 'maxWidth');
//设置
$('.selector').dialog('option', 'maxWidth', 600);
```
minHeight

类型:

Number

默认值:

150

为dialog指定一个可以被调整的最小高度,单位像素.
代码示例
使用指定的minHeight参数初始化一个dialog.
```
$('.selector').dialog({ minHeight: 300 });
```
在初始化后设置或者获取minHeight参数.
```
//获取
var minHeight = $('.selector').dialog('option', 'minHeight');
//设置
$('.selector').dialog('option', 'minHeight', 300);
```
minWidth

类型:

Number

默认值:

150

为dialog指定一个可以被调整的最小宽度,单位像素.
代码示例
使用指定的minWidth参数初始化一个dialog.
```
$('.selector').dialog({ minWidth: 400 });
```
在初始化后设置或者获取minWidth参数.
```
//获取
var minWidth = $('.selector').dialog('option', 'minWidth');
//设置
$('.selector').dialog('option', 'minWidth', 400);
```
modal

类型:

Boolean

默认值:

false

如果设置为true,dialog将会有一个模块行为; 页面中的其他元素将被禁用 (i.e.不能互动). Modal dialogs 将创建一个覆盖页面上其他元素的对象.
代码示例
使用指定的modal参数初始化一个dialog.
```
$('.selector').dialog({ modal: true });
```
在初始化后设置或者获取modal参数.
```
//获取
var modal = $('.selector').dialog('option', 'modal');
//设置
$('.selector').dialog('option', 'modal', true);
```
position

类型:

String, Array

默认值:

'center'

指定dialog将会显示在何处. 允许使用的值: 'center', 'left', 'right', 'top', 'bottom', 或者一个包含成对坐标的数组(相对于视窗top和left的像素值) 或者允许的字符串值(例. ['right','top'] 设置到右上角).
代码示例
使用指定的position参数初始化一个dialog.
```
$('.selector').dialog({ position: 'top' });
```
在初始化后设置或者获取position参数.
```
//获取
var position = $('.selector').dialog('option', 'position');
//设置
$('.selector').dialog('option', 'position', 'top');
```
resizable

类型:

Boolean

默认值:

true

设置dialog是否允许调整大小.
代码示例
使用指定的resizable参数初始化一个dialog.
```
$('.selector').dialog({ resizable: false });
```
在初始化后设置或者获取resizable参数.
```
//获取
var resizable = $('.selector').dialog('option', 'resizable');
//设置
$('.selector').dialog('option', 'resizable', false);
```
show

类型:

String

默认值:

null

dialog打开时的动画效果.
代码示例
使用指定的show参数初始化一个dialog.
```
$('.selector').dialog({ show: 'slide' });
```
在初始化后设置或者获取show参数.
```
//获取
var show = $('.selector').dialog('option', 'show');
//设置
$('.selector').dialog('option', 'show', 'slide');
```
stack

类型:

Boolean

默认值:

true

指定此dialog是否堆叠在其他dialog之上. 这将会使该dialog在获得焦点时位于其他dialog的前方.
代码示例
使用指定的stack参数初始化一个dialog.
```
$('.selector').dialog({ stack: false });
```
在初始化后设置或者获取stack参数.
```
//获取
var stack = $('.selector').dialog('option', 'stack');
//设置
$('.selector').dialog('option', 'stack', false);
```
title

类型:

String

默认值:

''

指定dialog的标题文字. 这个标题也可以使用dialog的元素源的title属性指定.
代码示例
使用指定的title参数初始化一个dialog.
```
$('.selector').dialog({ title: 'Dialog Title' });
```
在初始化后设置或者获取title参数.
```
//获取
var title = $('.selector').dialog('option', 'title');
//设置
$('.selector').dialog('option', 'title', 'Dialog Title');
```
width

类型:

Number

默认值:

300

dialog的宽度, 单位像素.
代码示例
使用指定的width参数初始化一个dialog.
```
$('.selector').dialog({ width: 460 });
```
在初始化后设置或者获取width参数.
```
//获取
var width = $('.selector').dialog('option', 'width');
//设置
$('.selector').dialog('option', 'width', 460);
```
zIndex

类型:

Integer

默认值:

1000

dialog的初始z-index.
代码示例
使用指定的zIndex参数初始化一个dialog.
```
$('.selector').dialog({ zIndex: 3999 });
```
在初始化后设置或者获取zIndex参数.
```
//获取
var zIndex = $('.selector').dialog('option', 'zIndex');
//设置
$('.selector').dialog('option', 'zIndex', 3999);
```

beforeclose

类型:

dialogbeforeclose

这个事件在dialog试图关闭时触发. 如果之前的事件句柄(回调函数)返回false,关闭将停止.
代码示例
提供一个回调函数对beforeclose事件进行操作.
```
$('.selector').dialog({
   beforeclose: function(event, ui) { ... }
});
```
使用dialogbeforeclose类型来绑定beforeclose事件.
```
$('.selector').bind('dialogbeforeclose', function(event, ui) {
  ...
});
```
open

类型:

dialogopen

此事件在dialog打开时触发.
代码示例
提供一个回调函数对open事件进行操作.
```
$('.selector').dialog({
   open: function(event, ui) { ... }
});
```
使用dialogopen类型来绑定open事件.
```
$('.selector').bind('dialogopen', function(event, ui) {
  ...
});
```
focus

类型:

dialogfocus

此事件在dialog获得焦点时触发.
代码示例
提供一个回调函数对focus事件进行操作.
```
$('.selector').dialog({
   focus: function(event, ui) { ... }
});
```
使用dialogfocus类型来绑定focus事件.
```
$('.selector').bind('dialogfocus', function(event, ui) {
  ...
});
```
dragStart

类型:

dragStart

这个事件在dialog拖动开始之前触发.
代码示例
提供一个回调函数对dragStart事件进行操作.
```
$('.selector').dialog({
   dragStart: function(event, ui) { ... }
});
```
使用dragStart类型来绑定dragStart事件.
```
$('.selector').bind('dragStart', function(event, ui) {
  ...
});
```
drag

类型:

drag

这个事件在dialog被拖动时触发.
代码示例
提供一个回调函数对drag事件进行操作.
```
$('.selector').dialog({
   drag: function(event, ui) { ... }
});
```
使用drag类型来绑定drag事件.
```
$('.selector').bind('drag', function(event, ui) {
  ...
});
```
dragStop

类型:

dragStop

这个事件在dialog拖动结束时触发.
代码示例
提供一个回调函数对dragStop事件进行操作.
```
$('.selector').dialog({
   dragStop: function(event, ui) { ... }
});
```
使用dragStop类型来绑定dragStop事件.
```
$('.selector').bind('dragStop', function(event, ui) {
  ...
});
```
resizeStart

类型:

resizeStart

这个事件在dialog开始调整大小时触发.
代码示例
提供一个回调函数对resizeStart事件进行操作.
```
$('.selector').dialog({
   resizeStart: function(event, ui) { ... }
});
```
使用resizeStart类型来绑定resizeStart事件.
```
$('.selector').bind('resizeStart', function(event, ui) {
  ...
});
```
resize

类型:

resize

这个事件在dialog调整大小时触发.
代码示例
提供一个回调函数对resize事件进行操作.
```
$('.selector').dialog({
   resize: function(event, ui) { ... }
});
```
使用resize类型来绑定resize事件.
```
$('.selector').bind('resize', function(event, ui) {
  ...
});
```
resizeStop

类型:

resizeStop

这个事件在dialog调整大小结束时触发.
代码示例
提供一个回调函数对resizeStop事件进行操作.
```
$('.selector').dialog({
   resizeStop: function(event, ui) { ... }
});
```
使用resizeStop类型来绑定resizeStop事件.
```
$('.selector').bind('resizeStop', function(event, ui) {
  ...
});
```
close

类型:

dialogclose

这个事件在dialog关闭时触发.
代码示例
提供一个回调函数对close事件进行操作.
```
$('.selector').dialog({
   close: function(event, ui) { ... }
});
```
使用dialogclose类型来绑定close事件.
```
$('.selector').bind('dialogclose', function(event, ui) {
  ...
});
```

destroy

方法签名:

.dialog( 'destroy' )

完全移除dialog功能. 这将使元素返回到之前的初始化状态.
disable

方法签名:

.dialog( 'disable' )

禁用dialog.
enable

方法签名:

.dialog( 'enable' )

启用dialog.
option

方法签名:

.dialog( 'option', optionName, [value] )

获取或者设置dialog参数. 如果没有提供参数值则是获取.
close

方法签名:

.dialog( 'close' )

关闭 dialog.
isOpen

方法签名:

.dialog( 'isOpen' )

测试dialog是否已被打开.
moveToTop

方法签名:

.dialog( 'moveToTop' )

将dialog移动到dialog堆的最上方.
open

方法签名:

.dialog( 'open' )

打开 dialog.

jQuery UI Dialog插件使用jQuery UI CSS 框架的外观和风格，包括颜色和背景纹理.我们建议您使用ThemeRoller工具来创建和下载的自定义主题，很容易建立和维护.

如果有更深层次的个性化需要，有特定类别的工具ui.dialog.css样式可供参考，可以修改这些参考。这些课程是下面以高亮和粗体显示的。

jQuery UI CSS Framework classes示例

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all undefined ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
      <p>Dialog content goes here.</p>
   </div>
</div>

Note: 注：这是一个示例dialog插件所产生的标记,而不是你应该使用的标记.创建一个dialog唯一需要的标记是 <div></div>.

部件

动画

UI/API/1.7/Dialog

jQuery UI Dialog

概述

其他附加文件

示例

参数

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

事件

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

方法

主题

jQuery UI CSS Framework classes示例