Web Development with jQuery (2015)

Dialog Methods

Method

Description

Return Value

dialog(options)

Makes the selected elements into dialog boxes.

jQuery

dialog('close')

Closes the dialog.

jQuery

dialog('destroy')

Completely removes the dialog.

jQuery

dialog('isOpen')

Determines if the dialog is open.

Boolean

dialog('moveToTop')

Moves the specified dialog on top of the dialogs stack.

jQuery

dialog('open')

Opens the dialog.

jQuery

dialog('option',optionName)

Returns the value of the specified option.

Mixed

dialog('option', optionName, value)

Sets the specified option to the specified value.

jQuery

dialog('option')

Returns an object of options in key, value pairs.

Object

dialog('option',optionObject)

Sets the specified options as an object of key, value pairs.

jQuery

dialog('widget')

Returns a jQuery object containing the dialog.

jQuery

Dialog Options

Option

Description

Type

appendTo

What element the dialog should be appended to.
Default value: 'body'

Selector

autoOpen

When set to true, the dialog opens automatically when the dialog is called. If set to false, it stays hidden until dialog('open') is called on it.
Default value: true

Boolean

buttons

Specifies which buttons should display on the dialog. The property key is the text of the button. The value is the callback function for when the button is clicked. 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.
Default value: {}

Object, Array

closeOnEscape

Specifies whether the dialog should close when the user presses the [Escape] key.
Default value: true

Boolean

closeText

Specifies the text for the close button.
Default value: 'close'

String

dialogClass

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

String

draggable

When set to true, the resulting dialog will be draggable. If false, the dialog will not be draggable.
Default value: true

Boolean

height

The height of the dialog, in pixels.
Default value: 200

Number, String

hide

Whether and how to animate the closing of a dialog.
If a boolean value is provided, false indicates no animation, and the dialog closes immediately. If true is provided, the dialog fades out with the default duration and default easing.
If a number is provided, it indicates how long the fade animation should take place with the default easing.
If a string is provided, it indicates what animation or UI effect to use. For example, 'slideUp' or 'fold'. This animation will be applied with default duration and default easing.
If an object is provided, you may specify the following properties: effect, delay, duration, and easing.
Default value: null

Boolean, Number, String, Object

maxHeight

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

Number

maxWidth

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

Number

minHeight

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

Number

minWidth

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

Number

modal

When modal is set to true, the dialog will have modal behavior; other items on the page will be disabled (that is, cannot be interacted with). Modal dialogs create an overlay below the dialog but above other page elements. Custom style values for the overlay (for example, changing its color or opacity) can be set by overriding the styles for the ui-widget-overlay class.
Default value: false

Boolean

position

Specifies where the dialog should be displayed.
If an object is specified, it uses the jQuery UI Position Utility (http://api.jqueryui.com/position/).
If a string is specified, the possible values are: 'center', 'left', 'right', 'top', and 'bottom'.
If an array is specified, it should contain a coordinate pair (in pixel offset from the top, left of viewport) or the possible string values (for example, ['right', 'top'] for top-right corner).
Default value: {my: 'center', at: 'center', of: 'window'}

Object, String, Array

resizable

Specifies whether the dialog will be resizable.
Default value: true

Boolean

show

Whether and how to animate the opening of a dialog.
If a boolean value is provided, false indicates no animation, and the dialog closes immediately. If true is provided, the dialog fades out with the default duration and default easing.
If a number is provided, it indicates how long the fade animation should take place with the default easing.
If a string is provided, it indicates what animation or UI effect to use,. for example, 'slideUp' or 'fold'. This animation will be applied with default duration and default easing.
If an object is provided, you may specify the following properties: effect, delay, duration, and easing.
Default value: null

Boolean, Number, String, Object

title

Specifies the title of the dialog. The title can also be specified by the title attribute on the dialog source element.
Default value: null

String

width

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

Number

Dialog Events

Option

Description

Value

beforeClose
bind('dialogbeforeclose')
on('dialogbeforeclose')

A function that's executed before a dialog is closed.

function(event, ui)

close
bind('dialogclose')
on('dialogclose')

A function that's executed when a dialog is closed.

function(event, ui)

create
bind('dialogcreate')
on('dialogcreate')

A function that's executed when a dialog is created.

function(event, ui)

drag
bind('dialogdrag')
on('dialogdrag')

A function that's executed while a dialog is dragged.

function(event, ui)

dragStart
bind('dialogdragstart')
on('dialogdragstart')

A function that's executed when a dialog is at the beginning of a dialog drag.

function(event, ui)

dragStop
bind('dialogdragstop')
on('dialogdragstop')

A function that's executed when a dialog drag ends.

function(event, ui)

focus
bind('dialogfocus')
on('dialogfocus')

A function that's executed at the dialog focus event. The function gets passed two arguments in accordance with the triggerHandler interface. The data passed is the focused dialog options object.

function(event, ui)

open
bind('dialogopen')
on('dialogopen')

A function that's executed when a dialog is opened.

function(event, ui)

resize
bind('dialogresize')
on('dialogresize')

A function that's executed during a dialog resize.

function(event, ui)

resizeStart
bind('dialogresizestart')
on('dialogresizestart')

A function that's executed when a dialog resize begins.

function(event, ui)

resizeStop
bind('dialogresizestop')
on('dialogresizestop')

A function that's executed when a dialog resize ends.

function(event, ui)

UI Object

Option

Description

Type

ui.position

The current CSS position of the dialog.

Object

ui.offset

The current offset position of the dialog.

Object

ui.originalPosition

The CSS position of the dialog prior to being resized.

Object

ui.originalSize

The size of the dialog prior to being resized.

Object

ui.size

The current size of the dialog.

Object