jQuery UI dialog documentation

## Dialog Widgetversion added: 1.0

Description: Open content in an interactive overlay.

## Options

### autoOpenType: Boolean

Default: `true`
If set to `true`, the dialog will automatically open upon initialization. If `false`, the dialog will stay hidden until the `open()` method is called.

### buttonsType: Object or Array

Default: `{}`
Specifies which buttons should be displayed on the dialog. The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object.
Multiple types supported:

- Object: The keys are the button labels and the values are the callbacks for when the associated button is clicked.
- Array: Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button.

### closeOnEscapeType: Boolean

Default: `true`
Specifies whether the dialog should close when it has focus and the user presses the esacpe (ESC) key.

### closeTextType: String

Default: `"close"`
Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme.

### dialogClassType: String

Default: `""`
The specified class name(s) will be added to the dialog, for additional theming.

### disabledType: Boolean

Default: `false`
Disables the dialog if set to `true`.
Code examples:

Initialize the dialog with the disabled option specified:

`$(` `".selector"` `).dialog({ disabled:` `true` `});`

Get or set the disabled option, after initialization:

`// getter` `var` `disabled = $(` `".selector"` `).dialog(` `"option"``,` `"disabled"` `);` `// setter` `$(` `".selector"` `).dialog(` `"option"``,` `"disabled"``,` `true` `);`

### draggableType: Boolean

Default: `true`
If set to `true`, the dialog will be draggable by the title bar. Requires the jQuery UI Draggable wiget to be included.

### heightType: Number or String

Default: `"auto"`
The height of the dialog.
Multiple types supported:

- Number: The height in pixels.
- String: The only supported string value is `"auto"` which will allow the dialog height to adjust based on its content.

### hideType: Number or String or Object

Default: `null`
If and how to animate the hiding of the dialog.
Multiple types supported:

- Number: The dialog will fade out while animating the height and width for the specified duration.
- String: The dialog will be hidden using the specified jQuery UI effect. See the list of effects for possible values.
- Object: If the value is an object, then `effect`, `duration`, and `easing` properties may be provided. The `effect` property must be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If `duration` or `easing` is omitted, then the default values will be used.

### maxHeightType: Number

Default: `false`
The maximum height to which the dialog can be resized, in pixels.

### maxWidthType: Number

Default: `false`
The maximum width to which the dialog can be resized, in pixels.

### minHeightType: Number

Default: `150`
The minimum height to which the dialog can be resized, in pixels.

### minWidthType: Number

Default: `150`
The minimum width to which the dialog can be resized, in pixels.

### modalType: Boolean

Default: `false`
If set to `true`, the dialog will have modal behavior; other items on the page will be disabled, i.e., cannot be interacted with. Modal dialogs create an overlay below the dialog but above other page elements.

### positionType: Object or String or Array

Default: `{ my: "center", at: "center", of: window }`
Specifies where the dialog should be displayed. The dialog will handle collisions such that as much of the dialog is visible as possible.
Multiple types supported:

- Object: Identifies the position of the dialog when opened. The `of` option defaults to the window, but you can specify another element to position against. You can refer to the jQuery UI Position utility for more details about the various options.
- String: A string representing the position within the viewport. Possible values: `"center"`, `"left"`, `"right"`, `"top"`, `"bottom"`.
- Array: An array containing an x, y coordinate pair in pixel offset from the top left corner of the viewport or the name of a possible string value.

### resizableType: Boolean

Default: `true`
If set to `true`, the dialog will be resizable. Requires the jQuery UI Resizable widget to be included.

### showType: Number or String or Object

Default: `null`
If and how to animate the showing of the dialog.
Multiple types supported:

- Number: The dialog will fade in while animating the height and width for the specified duration.
- String: The dialog will be shown using the specified jQuery UI effect. See the list of effects for possible values.
- Object: If the value is an object, then `effect`, `duration`, and `easing` properties may be provided. The `effect` property must be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If `duration` or `easing` is omitted, then the default values will be used.

### stackType: Boolean

Default: `true`
Specifies whether the dialog will stack on top of other dialogs. This will cause the dialog to move to the front of other dialogs when it gains focus.

### titleType: String

Default: `""`
Specifies the title of the dialog. Any valid HTML may be set as the title. The title can also be specified by the `title` attribute on the dialog source element.

### widthType: Number

Default: `300`
The width of the dialog, in pixels.

### zIndexType: Integer

Default: `1000`
The starting z-index for the dialog.

## Methods

### close()

Closes the dialog.

- This method does not accept any arguments.

### destroy()

Removes the dialog functionality completely. This will return the element back to its pre-init state.

- This method does not accept any arguments.

### disable()

Disables the dialog.

- This method does not accept any arguments.

### enable()

Enables the dialog.

- This method does not accept any arguments.

### isOpen() Returns: Boolean

Whether the dialog is currently open.

- This method does not accept any arguments.

### moveToTop()

Moves the dialog to the top of the dialog stack.

- This method does not accept any arguments.

### open()

Opens the dialog.

- This method does not accept any arguments.

### option( optionName ) Returns: Object

Gets the value currently associated with the specified `optionName`.

- optionName
  Type: String
  The name of the option to get.

### option() Returns: PlainObject

Gets an object containing key/value pairs representing the current dialog options hash.

- This method does not accept any arguments.

### option( optionName, value )

Sets the value of the dialog option associated with the specified `optionName`.

- optionName
  Type: String
  The name of the option to set.
- value
  Type: Object
  A value to set for the option.

### option( options )

Sets one or more options for the dialog.

- options
  Type: Object
  A map of option-value pairs to set.

### widget() Returns: jQuery

Returns a `jQuery` object containing the generated wrapper.

- This method does not accept any arguments.

## Events

### beforeClose( event, ui )

Triggered when a dialog is about to close. If canceled, the dialog will not close.

- event
  Type: Event
- ui
  Type: Object

### close( event, ui )

Triggered when the dialog is closed.

- event
  Type: Event
- ui
  Type: Object

### create( event, ui )

Triggered when the dialog is created.

- event
  Type: Event
- ui
  Type: Object

### drag( event, ui )

Triggered while the dialog is being dragged.

- event
  Type: Event
- ui
  Type: Object
  - position
    Type: Object
    The current CSS position of the dialog.
  - offset
    Type: Object
    The current offset position of the dialog.

### dragStart( event, ui )

Triggered when the user starts dragging the dialog.

- event
  Type: Event
- ui
  Type: Object
  - position
    Type: Object
    The current CSS position of the dialog.
  - offset
    Type: Object
    The current offset position of the dialog.

### dragStop( event, ui )

Triggered after the dialog has been dragged.

- event
  Type: Event
- ui
  Type: Object
  - position
    Type: Object
    The current CSS position of the dialog.
  - offset
    Type: Object
    The current offset position of the dialog.

### focus( event, ui )

Triggered when the dialog gains focus.

- event
  Type: Event
- ui
  Type: Object

### open( event, ui )

Triggered when the dialog is opened.

- event
  Type: Event
- ui
  Type: Object

### resize( event, ui )

Triggered while the dialog is being resized.

- event
  Type: Event
- ui
  Type: Object
  - orginalPosition
    Type: Object
    The CSS position of the dialog prior to being resized.
  - position
    Type: Object
    The current CSS position of the dialog.
  - originalSize
    Type: Object
    The size of the dialog prior to being resized.
  - size
    Type: Object
    The current size of the dialog.

### resizeStart( event, ui )

Triggered when the user starts resizing the dialog.

- event
  Type: Event
- ui
  Type: Object
  - orginalPosition
    Type: Object
    The CSS position of the dialog prior to being resized.
  - position
    Type: Object
    The current CSS position of the dialog.
  - originalSize
    Type: Object
    The size of the dialog prior to being resized.
  - size
    Type: Object
    The current size of the dialog.

### resizeStop( event, ui )

Triggered after the dialog has been resized.

- event
  Type: Event
- ui
  Type: Object
  - orginalPosition
    Type: Object
    The CSS position of the dialog prior to being resized.
  - position
    Type: Object
    The current CSS position of the dialog.
  - originalSize
    Type: Object
    The size of the dialog prior to being resized.
  - size
    Type: Object
    The current size of the dialog.

A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.

If the content length exceeds the maximum height, a scrollbar will automatically appear.

A bottom button bar and semi-transparent modal overlay layer are common options that can be added.

### Additional Notes:

- This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.

## Example:

#### A simple jQuery UI Dialog

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``=``"http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"``>` `` `<``script` `src``=``"http://code.jquery.com/jquery-1.8.2.js"``></``script``>` `` `<``script` `src``=``"http://code.jquery.com/ui/1.9.1/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``>`

#### Demo: