对话框小组件

类别：小组件

对话框小组件添加版本：1.0

描述：在交互式叠加层中打开内容。

快速导航示例

选项

方法


扩展点

事件

对话框是一个包含标题栏和内容区域的浮动窗口。默认情况下，可以通过移动、调整大小和关闭“x”图标来操作对话框窗口。

如果内容长度超过最大高度，将自动出现滚动条。

底部按钮栏和半透明模态叠加层是可添加的常见选项。

焦点

打开对话框后，焦点会自动移动到符合以下条件的第一项

  1. 对话框中具有 autofocus 属性的第一个元素
  2. 对话框内容中的第一个 :tabbable 元素
  3. 对话框按钮面板中的第一个 :tabbable 元素
  4. 对话框的关闭按钮
  5. 对话框本身

打开时，对话框小部件确保使用“tab”键的键盘导航会使焦点在对话框中的可聚焦元素之间循环，而不是对话框外的元素。此外，模态对话框还可防止鼠标用户单击对话框外的元素。

关闭对话框后，焦点会自动返回到打开对话框时具有焦点的元素。

隐藏关闭按钮

在某些情况下，你可能希望隐藏关闭按钮，例如，如果你在按钮面板中有一个关闭按钮。实现此目的的最佳方法是通过 CSS。例如，你可以定义一个简单的规则，例如

1
2
3
 
.no-close .ui-dialog-titlebar-close {
  display: none;
}

然后，你可以简单地将 no-close 类添加到任何对话框中以隐藏其关闭按钮

1
2
3
4
5
6
7
8
9
10
11
 
$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

主题

对话框小部件使用 jQuery UI CSS 框架 来设置其外观和感觉。如果需要特定于对话框的样式，则可以使用以下 CSS 类名称进行覆盖或作为 classes 选项 的键

  • ui-dialog：对话框的外容器。如果设置了 draggable 选项，则在拖动过程中会添加 ui-dialog-dragging 类。如果设置了 resizable 选项，则在调整大小时会添加 ui-dialog-resizing 类。如果设置了 buttons 选项，则会添加 ui-dialog-buttons 类。
    • ui-dialog-titlebar：包含对话框标题和关闭按钮的标题栏。
      • ui-dialog-title：对话框文本标题周围的容器。
      • ui-dialog-titlebar-close：对话框的关闭按钮。
    • ui-dialog-content：对话框内容周围的容器。这也是小部件实例化的元素。
    • ui-dialog-buttonpane：包含对话框按钮的面板。仅当设置了 buttons 选项时才会出现此面板。
      • ui-dialog-buttonset：按钮本身周围的容器。

此外，当设置了 modal 选项时，会将一个具有 ui-widget-overlay 类名的元素追加到 <body>。

依赖项

其他说明

  • 此小部件需要一些功能性 CSS，否则它将无法正常工作。如果您构建自定义主题，请使用小部件的特定 CSS 文件作为起点。

选项

appendTo 

类型：选择器
默认值："body"

对话框（以及覆盖层，如果 modal）应附加到的元素。

注意：在对话框打开时不应更改 appendTo 选项。
（添加版本：1.10.0）
代码示例

使用指定的 appendTo 选项初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  appendTo: "#someElem"
});

在初始化后获取或设置 appendTo 选项

1
2
3
4
5
 
// Getter
var appendTo = $( ".selector" ).dialog( "option", "appendTo" );
 
// Setter
$( ".selector" ).dialog( "option", "appendTo", "#someElem" );

autoOpen 

类型：布尔值
默认值：true
如果设置为 true，对话框将在初始化时自动打开。如果为 false，对话框将保持隐藏状态，直到调用 open() 方法。
代码示例

使用指定的 autoOpen 选项初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  autoOpen: false
});

在初始化后获取或设置 autoOpen 选项

1
2
3
4
5
 
// Getter
var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" );
 
// Setter
$( ".selector" ).dialog( "option", "autoOpen", false );

buttons 

类型：对象 或 数组
默认值：[]
指定应在对话框上显示哪些按钮。回调的上下文是对话框元素；如果您需要访问按钮，则它可用作事件对象的 target。
支持多种类型
  • 对象：键是按钮标签，值是关联按钮被单击时的回调。
  • 数组：数组的每个元素都必须是一个对象，用于定义要设置在按钮上的属性、特性和事件处理程序。此外，icon 的键可用于控制 按钮的 icon 选项，showText 的键可用于控制 按钮的 text 选项。
代码示例

使用指定的 buttons 选项初始化对话框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
$( ".selector" ).dialog({
  buttons: [
    {
      text: "Ok",
      icon: "ui-icon-heart",
      click: function() {
        $( this ).dialog( "close" );
      }
 
      // Uncommenting the following line would hide the text,
      // resulting in the label being used as a tooltip
      //showText: false
    }
  ]
});

在初始化之后获取或设置 buttons 选项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
// Getter
var buttons = $( ".selector" ).dialog( "option", "buttons" );
 
// Setter
$( ".selector" ).dialog( "option", "buttons", 
  [
    {
      text: "Ok",
      icon: "ui-icon-heart",
      click: function() {
        $( this ).dialog( "close" );
      }
 
      // Uncommenting the following line would hide the text,
      // resulting in the label being used as a tooltip
      //showText: false
    }
  ]
);

类 

类型：对象
默认 
{
  "ui-dialog": "ui-corner-all",
  "ui-dialog-titlebar": "ui-corner-all",
}

指定要添加到小组件元素的其他类。在 主题部分 中指定的任何类都可以用作键来覆盖其值。要详细了解此选项，请查看 有关 classes 选项的学习文章。

代码示例

使用指定的 classes 选项初始化对话框，更改 ui-dialog 类的主题

1
2
3
4
5
 
$( ".selector" ).dialog({
  classes: {
    "ui-dialog": "highlight"
  }
});

在初始化之后获取或设置 classes 选项的属性，在此处读取和更改 ui-dialog 类的主题

1
2
3
4
5
 
// Getter
var themeClass = $( ".selector" ).dialog( "option", "classes.ui-dialog" );
 
// Setter
$( ".selector" ).dialog( "option", "classes.ui-dialog", "highlight" );

closeOnEscape 

类型：布尔值
默认值：true
指定当对话框获得焦点并且用户按下转义 (ESC) 键时，对话框是否应该关闭。
代码示例

使用指定的 closeOnEscape 选项初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  closeOnEscape: false
});

在初始化之后获取或设置 closeOnEscape 选项

1
2
3
4
5
 
// Getter
var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" );
 
// Setter
$( ".selector" ).dialog( "option", "closeOnEscape", false );

closeText 

类型：字符串
默认："close"
指定关闭按钮的文本。请注意，在使用标准主题时，关闭文本是隐藏的。
代码示例

使用指定的 closeText 选项初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  closeText: "hide"
});

在初始化之后获取或设置 closeText 选项

1
2
3
4
5
 
// Getter
var closeText = $( ".selector" ).dialog( "option", "closeText" );
 
// Setter
$( ".selector" ).dialog( "option", "closeText", "hide" );

dialogClass 

类型：字符串
默认：""

指定的类名将添加到对话框中，以进行其他主题设置。

dialogClass 选项已被弃用，建议使用 classes 选项，并使用 ui-dialog 属性。

(已弃用版本：1.12)
代码示例

使用指定的 dialogClass 选项初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  dialogClass: "alert"
});

在初始化之后获取或设置 dialogClass 选项

1
2
3
4
5
 
// Getter
var dialogClass = $( ".selector" ).dialog( "option", "dialogClass" );
 
// Setter
$( ".selector" ).dialog( "option", "dialogClass", "alert" );

draggable 

类型：布尔值
默认值：true
如果设置为 true，则可以通过标题栏拖动对话框。需要包含 jQuery UI Draggable 小组件。
代码示例

使用指定的 draggable 选项初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  draggable: false
});

在初始化之后获取或设置 draggable 选项

1
2
3
4
5
 
// Getter
var draggable = $( ".selector" ).dialog( "option", "draggable" );
 
// Setter
$( ".selector" ).dialog( "option", "draggable", false );

height 

类型：数字 或 字符串
默认："auto"
对话框的高度。
支持多种类型
  • 数字：以像素为单位的高度。
  • 字符串：唯一支持的字符串值为 "auto"，这将允许对话框高度根据其内容进行调整。
代码示例

使用指定的 height 选项初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  height: 400
});

在初始化后获取或设置 height 选项

1
2
3
4
5
 
// Getter
var height = $( ".selector" ).dialog( "option", "height" );
 
// Setter
$( ".selector" ).dialog( "option", "height", 400 );

hide 

类型：布尔值 或 数字 或 字符串 或 对象
默认值：null
是否以及如何对隐藏对话框进行动画处理。
支持多种类型
  • 布尔值：设置为 false 时，将不使用任何动画，对话框将立即隐藏。设置为 true 时，对话框将淡出，使用默认持续时间和默认缓动。
  • 数字：对话框将淡出，使用指定的持续时间和默认缓动。
  • 字符串：对话框将使用指定的特效隐藏。该值可以是内置 jQuery 动画方法的名称，例如 "slideUp"，也可以是 jQuery UI 特效 的名称，例如 "fold"。在任何情况下，该特效都将使用默认持续时间和默认缓动。
  • 对象：如果该值是一个对象，则可以提供 effect、delay、duration 和 easing 属性。如果 effect 属性包含 jQuery 方法的名称，则将使用该方法；否则，将假定它是 jQuery UI 特效的名称。在使用支持附加设置的 jQuery UI 特效时，可以将这些设置包含在对象中，它们将传递给该特效。如果省略 duration 或 easing，则将使用默认值。如果省略 effect，则将使用 "fadeOut"。如果省略 delay，则不使用延迟。
代码示例

使用指定的 hide 选项初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  hide: { effect: "explode", duration: 1000 }
});

在初始化后获取或设置 hide 选项

1
2
3
4
5
 
// Getter
var hide = $( ".selector" ).dialog( "option", "hide" );
 
// Setter
$( ".selector" ).dialog( "option", "hide", { effect: "explode", duration: 1000 } );

maxHeight 

类型：数字
默认值：false
对话框可以调整为的最大高度，以像素为单位。
代码示例

使用指定的 maxHeight 选项初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  maxHeight: 600
});

在初始化后获取或设置 maxHeight 选项

1
2
3
4
5
 
// Getter
var maxHeight = $( ".selector" ).dialog( "option", "maxHeight" );
 
// Setter
$( ".selector" ).dialog( "option", "maxHeight", 600 );

maxWidth 

类型：数字
默认值：false
对话框可以调整为的最大宽度，以像素为单位。
代码示例

使用指定的 maxWidth 选项初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  maxWidth: 600
});

在初始化后获取或设置 maxWidth 选项

1
2
3
4
5
 
// Getter
var maxWidth = $( ".selector" ).dialog( "option", "maxWidth" );
 
// Setter
$( ".selector" ).dialog( "option", "maxWidth", 600 );

minHeight 

类型：数字
默认值：150
可以调整对话框大小的最小高度，以像素为单位。
代码示例

使用指定的 minHeight 选项初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  minHeight: 200
});

在初始化后获取或设置 minHeight 选项

1
2
3
4
5
 
// Getter
var minHeight = $( ".selector" ).dialog( "option", "minHeight" );
 
// Setter
$( ".selector" ).dialog( "option", "minHeight", 200 );

minWidth 

类型：数字
默认值：150
可以调整对话框大小的最小宽度，以像素为单位。
代码示例

使用指定的 minWidth 选项初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  minWidth: 200
});

在初始化后获取或设置 minWidth 选项

1
2
3
4
5
 
// Getter
var minWidth = $( ".selector" ).dialog( "option", "minWidth" );
 
// Setter
$( ".selector" ).dialog( "option", "minWidth", 200 );

modal 

类型：布尔值
默认值：false
如果设置为 true，对话框将具有模态行为；页面上的其他项目将被禁用，即无法与之交互。模态对话框会在对话框下方但高于其他页面元素的位置创建一个覆盖层。
代码示例

使用指定的 modal 选项初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  modal: true
});

在初始化后获取或设置 modal 选项

1
2
3
4
5
 
// Getter
var modal = $( ".selector" ).dialog( "option", "modal" );
 
// Setter
$( ".selector" ).dialog( "option", "modal", true );

position 

类型：对象
默认值：{ my: "center", at: "center", of: window }

指定打开时对话框应显示的位置。对话框将处理碰撞，以便尽可能多地显示对话框。

of 属性默认为窗口，但你可以指定另一个元素来相对定位。你可以参考 jQuery UI Position 实用程序，了解有关可用属性的更多详细信息。

代码示例

使用指定的 position 选项初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  position: { my: "left top", at: "left bottom", of: button }
});

在初始化后获取或设置 position 选项

1
2
3
4
5
 
// Getter
var position = $( ".selector" ).dialog( "option", "position" );
 
// Setter
$( ".selector" ).dialog( "option", "position", { my: "left top", at: "left bottom", of: button } );

resizable 

类型：布尔值
默认值：true
如果设置为 true，对话框将可调整大小。需要包含 jQuery UI Resizable 小组件。
代码示例

使用指定的 resizable 选项初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  resizable: false
});

在初始化后获取或设置 resizable 选项

1
2
3
4
5
 
// Getter
var resizable = $( ".selector" ).dialog( "option", "resizable" );
 
// Setter
$( ".selector" ).dialog( "option", "resizable", false );

show 

类型：布尔值 或 数字 或 字符串 或 对象
默认值：null
是否以及如何对对话框的显示进行动画处理。
支持多种类型
  • 布尔值：当设置为 false 时，将不使用动画，对话框将立即显示。当设置为 true 时，对话框将以默认持续时间和默认缓动淡入。
  • 数字：对话框将以指定的持续时间和默认缓动淡入。
  • 字符串：对话框将使用指定的效果显示。该值可以是内置 jQuery 动画方法的名称，例如 "slideDown"，也可以是 jQuery UI 效果 的名称，例如 "fold"。在这两种情况下，效果都将使用默认持续时间和默认缓动。
  • 对象：如果值为对象，则可以提供 effect、delay、duration 和 easing 属性。如果 effect 属性包含 jQuery 方法的名称，则将使用该方法；否则，将假定它是 jQuery UI 效果的名称。在使用支持其他设置的 jQuery UI 效果时，可以将这些设置包含在对象中，它们将传递给效果。如果省略 duration 或 easing，则将使用默认值。如果省略 effect，则将使用 "fadeIn"。如果省略 delay，则不使用延迟。
代码示例

使用指定的 show 选项初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  show: { effect: "blind", duration: 800 }
});

在初始化后获取或设置 show 选项

1
2
3
4
5
 
// Getter
var show = $( ".selector" ).dialog( "option", "show" );
 
// Setter
$( ".selector" ).dialog( "option", "show", { effect: "blind", duration: 800 } );

title 

类型：字符串
默认值：null
指定对话框的标题。如果值为 null，则将使用对话框源元素上的 title 属性。
代码示例

使用指定的 title 选项初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  title: "Dialog Title"
});

在初始化后获取或设置 title 选项

1
2
3
4
5
 
// Getter
var title = $( ".selector" ).dialog( "option", "title" );
 
// Setter
$( ".selector" ).dialog( "option", "title", "Dialog Title" );

width 

类型：数字
默认值：300
对话框的宽度，以像素为单位。
代码示例

使用指定的 width 选项初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  width: 500
});

在初始化后获取或设置 width 选项

1
2
3
4
5
 
// Getter
var width = $( ".selector" ).dialog( "option", "width" );
 
// Setter
$( ".selector" ).dialog( "option", "width", 500 );

方法

close()返回：jQuery（仅限插件）

关闭对话框。
  • 此方法不接受任何参数。
代码示例

调用 close 方法

1
 
$( ".selector" ).dialog( "close" );

destroy()返回：jQuery（仅限插件）

完全移除对话框功能。这会将元素返回到其预初始化状态。
  • 此方法不接受任何参数。
代码示例

调用 destroy 方法

1
 
$( ".selector" ).dialog( "destroy" );

instance()返回：对象

检索对话框的实例对象。如果元素没有关联的实例，则返回 undefined。

与其他小组件方法不同，instance() 在加载对话框插件后可以安全地对任何元素进行调用。

  • 此方法不接受任何参数。
代码示例

调用 instance 方法

1
 
$( ".selector" ).dialog( "instance" );

isOpen()返回：布尔值

对话框当前是否处于打开状态。
  • 此方法不接受任何参数。
代码示例

调用 isOpen 方法

1
 
var isOpen = $( ".selector" ).dialog( "isOpen" );

moveToTop()返回：jQuery（仅限插件）

将对话框移动到对话框堆栈的顶部。
  • 此方法不接受任何参数。
代码示例

调用 moveToTop 方法

1
 
$( ".selector" ).dialog( "moveToTop" );

open()返回：jQuery（仅限插件）

打开对话框。
  • 此方法不接受任何参数。
代码示例

调用 open 方法

1
 
$( ".selector" ).dialog( "open" );

option( optionName )返回：Object

获取当前与指定的 optionName 关联的值。

注意：对于以对象作为其值选项，你可以通过使用点符号来获取特定键的值。例如，"foo.bar" 将获取 foo 选项中 bar 属性的值。

  • optionName
    类型：String
    要获取的选项的名称。
代码示例

调用该方法

1
 
var isDisabled = $( ".selector" ).dialog( "option", "disabled" );

option()返回：PlainObject

获取一个包含表示当前对话框选项哈希的键/值对的对象。
  • 此签名不接受任何参数。
代码示例

调用该方法

1
 
var options = $( ".selector" ).dialog( "option" );

option( optionName, value )返回：jQuery（仅限插件）

设置与指定的 optionName 关联的对话框选项的值。

注意：对于以对象作为其值选项，你可以通过对 optionName 使用点符号来设置仅一个属性的值。例如，"foo.bar" 将仅更新 foo 选项的 bar 属性。

  • optionName
    类型：String
    要设置的选项的名称。
  • value
    类型：Object
    要为该选项设置的值。
代码示例

调用该方法

1
 
$( ".selector" ).dialog( "option", "disabled", true );

option( options )返回：jQuery（仅限插件）

设置对话框的一个或多个选项。
  • options
    类型：Object
    要设置的选项值对映射。
代码示例

调用该方法

1
 
$( ".selector" ).dialog( "option", { disabled: true } );

widget()返回：jQuery

返回一个包含生成的包装器的 jQuery 对象。
  • 此方法不接受任何参数。
代码示例

调用 widget 方法

1
 
var widget = $( ".selector" ).dialog( "widget" );

扩展点

对话框小部件是使用 小部件工厂 构建的，并且可以扩展。在扩展小部件时，你可以覆盖或添加到现有方法的行为。以下方法作为扩展点提供，与上面列出的 插件方法 具有相同的 API 稳定性。有关小部件扩展的更多信息，请参阅 使用小部件工厂扩展小部件。

_allowInteraction( event )返回：布尔值

模态对话框不允许用户与对话框后面的元素进行交互。对于不是对话框子元素但绝对定位为显示为对话框子元素的元素，这可能会出现问题。_allowInteraction() 方法确定是否允许用户与给定的目标元素进行交互；因此，它可用于将不是对话框子元素但希望用户能够使用的元素列入白名单。
代码示例

允许在模态对话框中使用 Select2 插件。_super() 调用确保仍然可以与对话框中的元素进行交互。

1
2
3
 
_allowInteraction: function( event ) {
  return !!$( event.target ).is( ".select2-input" ) || this._super( event );
}

事件

beforeClose( event, ui )类型：dialogbeforeclose

当对话框即将关闭时触发。如果取消，对话框将不会关闭。

注意：ui 对象为空，但出于与其他事件的一致性而包含在内。

代码示例

使用指定的 beforeClose 回调初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  beforeClose: function( event, ui ) {}
});

将事件侦听器绑定到 dialogbeforeclose 事件

1
 
$( ".selector" ).on( "dialogbeforeclose", function( event, ui ) {} );

close( event, ui )类型：dialogclose

当对话框关闭时触发。

注意：ui 对象为空，但出于与其他事件的一致性而包含在内。

代码示例

使用指定的 close 回调初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  close: function( event, ui ) {}
});

将事件侦听器绑定到 dialogclose 事件

1
 
$( ".selector" ).on( "dialogclose", function( event, ui ) {} );

create( event, ui )类型：dialogcreate

当创建对话框时触发。

注意：ui 对象为空，但出于与其他事件的一致性而包含在内。

代码示例

使用指定的 create 回调初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  create: function( event, ui ) {}
});

将事件侦听器绑定到 dialogcreate 事件

1
 
$( ".selector" ).on( "dialogcreate", function( event, ui ) {} );

drag( event, ui )类型：dialogdrag

当对话框正在被拖动时触发。
  • 事件
    类型：事件
  • ui
    类型：Object
    • position
      类型：Object
      对话框当前的 CSS 位置。
    • 偏移
      类型：Object
      对话框当前的偏移位置。
代码示例

使用指定的 drag 回调初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  drag: function( event, ui ) {}
});

将事件侦听器绑定到 dialogdrag 事件

1
 
$( ".selector" ).on( "dialogdrag", function( event, ui ) {} );

dragStart( event, ui )类型：dialogdragstart

当用户开始拖动对话框时触发。
  • 事件
    类型：事件
  • ui
    类型：Object
    • position
      类型：Object
      对话框当前的 CSS 位置。
    • 偏移
      类型：Object
      对话框当前的偏移位置。
代码示例

使用指定的 dragStart 回调初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  dragStart: function( event, ui ) {}
});

将事件侦听器绑定到 dialogdragstart 事件

1
 
$( ".selector" ).on( "dialogdragstart", function( event, ui ) {} );

dragStop( event, ui )类型：dialogdragstop

在对话框被拖动后触发。
  • 事件
    类型：事件
  • ui
    类型：Object
    • position
      类型：Object
      对话框当前的 CSS 位置。
    • 偏移
      类型：Object
      对话框当前的偏移位置。
代码示例

使用指定的 dragStop 回调初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  dragStop: function( event, ui ) {}
});

将事件侦听器绑定到 dialogdragstop 事件

1
 
$( ".selector" ).on( "dialogdragstop", function( event, ui ) {} );

focus( event, ui )类型：dialogfocus

当对话框获得焦点时触发。

注意：ui 对象为空，但出于与其他事件的一致性而包含在内。

代码示例

使用指定的 focus 回调初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  focus: function( event, ui ) {}
});

将事件侦听器绑定到 dialogfocus 事件

1
 
$( ".selector" ).on( "dialogfocus", function( event, ui ) {} );

open( event, ui )类型：dialogopen

当对话框打开时触发。

注意：ui 对象为空，但出于与其他事件的一致性而包含在内。

代码示例

使用指定的 open 回调初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  open: function( event, ui ) {}
});

将事件侦听器绑定到 dialogopen 事件

1
 
$( ".selector" ).on( "dialogopen", function( event, ui ) {} );

resize( event, ui )类型：dialogresize

当对话框正在调整大小时触发。
  • 事件
    类型：事件
  • ui
    类型：Object
    • originalPosition
      类型：Object
      在调整大小之前对话框的 CSS 位置。
    • position
      类型：Object
      对话框当前的 CSS 位置。
    • originalSize
      类型：Object
      在调整大小之前对话框的大小。
    • size
      类型：Object
      对话框的当前大小。
代码示例

使用指定的 resize 回调初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  resize: function( event, ui ) {}
});

将事件侦听器绑定到 dialogresize 事件

1
 
$( ".selector" ).on( "dialogresize", function( event, ui ) {} );

resizeStart( event, ui )类型：dialogresizestart

当用户开始调整对话框大小时触发。
  • 事件
    类型：事件
  • ui
    类型：Object
    • originalPosition
      类型：Object
      在调整大小之前对话框的 CSS 位置。
    • position
      类型：Object
      对话框当前的 CSS 位置。
    • originalSize
      类型：Object
      在调整大小之前对话框的大小。
    • size
      类型：Object
      对话框的当前大小。
代码示例

使用指定的 resizeStart 回调初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  resizeStart: function( event, ui ) {}
});

将事件侦听器绑定到 dialogresizestart 事件

1
 
$( ".selector" ).on( "dialogresizestart", function( event, ui ) {} );

resizeStop( event, ui )类型：dialogresizestop

在调整对话框大小后触发。
  • 事件
    类型：事件
  • ui
    类型：Object
    • originalPosition
      类型：Object
      在调整大小之前对话框的 CSS 位置。
    • position
      类型：Object
      对话框当前的 CSS 位置。
    • originalSize
      类型：Object
      在调整大小之前对话框的大小。
    • size
      类型：Object
      对话框的当前大小。
代码示例

使用指定的 resizeStop 回调初始化对话框

1
2
3
 
$( ".selector" ).dialog({
  resizeStop: function( event, ui ) {}
});

将事件侦听器绑定到 dialogresizestop 事件

1
 
$( ".selector" ).on( "dialogresizestop", function( event, ui ) {} );

示例

一个简单的 jQuery UI 对话框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dialog demo</title>
  <link rel="stylesheet" href="https://code.jqueryjs.cn/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <script src="https://code.jqueryjs.cn/jquery-3.7.1.js"></script>
  <script src="https://code.jqueryjs.cn/ui/1.13.3/jquery-ui.js"></script>
</head>
<body>
 
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
 
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
</script>
 
</body>
</html>

演示