QuickNav

Options

autoOpen
buttons
closeOnEscape
closeText
dialogClass
disabled
draggable
height
show
maxHeight
maxWidth
minHeight
minWidth
modal
position
resizable
show
stack
title
width
zIndex

Methods

close
destroy
disable
enable
isOpen
moveToTop
open
option
widget

Events

beforeClose
create
open
focus
dragStart
drag
dragStop
resizeStart
resize
resizeStop
close

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.

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.

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", "botom".
  • 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 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.

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.

destroy()

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

disable()

Disables the dialog.

enable()

Enables the dialog.

isOpen() Returns: Boolean

Whether the dialog is currently open.

moveToTop()

Moves the dialog to the top of the dialog stack.

open()

Opens the dialog.

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.

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.

Events

beforeClose( event, ui )

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

close( event, ui )

Triggered when the dialog is closed.

create( event, ui )

Triggered when the dialog is created.

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.

open( event, ui )

Triggered when the dialog is opened.

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.0/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.0/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: