Dialog Widget version added: 1.0
Description: Open content in an interactive overlay.
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.
Hiding the close button
In some cases, you may want to hide the close button, for instance, if you have a close button in the button pane. The best way to accomplish this is via CSS. As an example, you can define a simple rule, such as:
1
2
3
|
|
Then, you can simply add the no-close
class to any dialog in order to hide it's close button:
1
2
3
4
5
6
7
8
9
10
11
|
|
Dependencies
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.
Options
appendToType: Selector
"body"
Initialize the dialog with the appendTo option specified:
1
|
|
Get or set the appendTo option, after initialization:
1
2
3
4
5
|
|
autoOpenType: Boolean
true
true
, the dialog will automatically open upon initialization. If false
, the dialog will stay hidden until the open()
method is called.Initialize the dialog with the autoOpen option specified:
1
|
|
Get or set the autoOpen option, after initialization:
1
2
3
4
5
|
|
closeOnEscapeType: Boolean
true
Initialize the dialog with the closeOnEscape option specified:
1
|
|
Get or set the closeOnEscape option, after initialization:
1
2
3
4
5
|
|
closeTextType: String
"close"
Initialize the dialog with the closeText option specified:
1
|
|
Get or set the closeText option, after initialization:
1
2
3
4
5
|
|
dialogClassType: String
""
Initialize the dialog with the dialogClass option specified:
1
|
|
Get or set the dialogClass option, after initialization:
1
2
3
4
5
|
|
draggableType: Boolean
true
true
, the dialog will be draggable by the title bar. Requires the jQuery UI Draggable wiget to be included.Initialize the dialog with the draggable option specified:
1
|
|
Get or set the draggable option, after initialization:
1
2
3
4
5
|
|
heightType: Number or String
"auto"
- 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.
Initialize the dialog with the height option specified:
1 |
|
Get or set the height option, after initialization:
1 2 3 4 5 |
|
hideType: Number or String or Object
null
- 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
,delay
,duration
, andeasing
properties may be provided. Theeffect
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. Ifduration
oreasing
is omitted, then the default values will be used. Ifdelay
is omitted, then no delay is used.
Initialize the dialog with the hide option specified:
1 |
|
Get or set the hide option, after initialization:
1 2 3 4 5 |
|
maxHeightType: Number
false
Initialize the dialog with the maxHeight option specified:
1
|
|
Get or set the maxHeight option, after initialization:
1
2
3
4
5
|
|
maxWidthType: Number
false
Initialize the dialog with the maxWidth option specified:
1
|
|
Get or set the maxWidth option, after initialization:
1
2
3
4
5
|
|
minHeightType: Number
150
Initialize the dialog with the minHeight option specified:
1
|
|
Get or set the minHeight option, after initialization:
1
2
3
4
5
|
|
minWidthType: Number
150
Initialize the dialog with the minWidth option specified:
1
|
|
Get or set the minWidth option, after initialization:
1
2
3
4
5
|
|
modalType: Boolean
false
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.Initialize the dialog with the modal option specified:
1
|
|
Get or set the modal option, after initialization:
1
2
3
4
5
|
|
positionType: Object or String or Array
{ 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.
Note: The String
and Array
forms are deprecated.
- 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.
Initialize the dialog with the position option specified:
1 |
|
Get or set the position option, after initialization:
1 2 3 4 5 |
|
resizableType: Boolean
true
true
, the dialog will be resizable. Requires the jQuery UI Resizable widget to be included.Initialize the dialog with the resizable option specified:
1
|
|
Get or set the resizable option, after initialization:
1
2
3
4
5
|
|
showType: Number or String or Object
null
- 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
,delay
,duration
, andeasing
properties may be provided. Theeffect
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. Ifduration
oreasing
is omitted, then the default values will be used. Ifdelay
is omitted, then no delay is used.
Initialize the dialog with the show option specified:
1 |
|
Get or set the show option, after initialization:
1 2 3 4 5 |
|
titleType: String
null
null
, the title
attribute on the dialog source element will be used.Initialize the dialog with the title option specified:
1
|
|
Get or set the title option, after initialization:
1
2
3
4
5
|
|
widthType: Number
300
Initialize the dialog with the width option specified:
1
|
|
Get or set the width option, after initialization:
1
2
3
4
5
|
|
Methods
close()
-
This method does not accept any arguments.
Invoke the close method:
1
|
|
destroy()
-
This method does not accept any arguments.
Invoke the destroy method:
1
|
|
isOpen()Returns: Boolean
-
This method does not accept any arguments.
Invoke the isOpen method:
1
|
|
moveToTop()
-
This method does not accept any arguments.
Invoke the moveToTop method:
1
|
|
open()
-
This method does not accept any arguments.
Invoke the open method:
1
|
|
option( optionName )Returns: Object
optionName
.-
optionNameType: StringThe name of the option to get.
Invoke the method:
1
|
|
option()Returns: PlainObject
-
This method does not accept any arguments.
Invoke the method:
1
|
|
option( optionName, value )
optionName
.-
optionNameType: StringThe name of the option to set.
-
valueType: ObjectA value to set for the option.
Invoke the method:
1
|
|
option( options )
-
optionsType: ObjectA map of option-value pairs to set.
Invoke the method:
1
|
|
widget()Returns: jQuery
jQuery
object containing the generated wrapper.-
This method does not accept any arguments.
Invoke the widget method:
1
|
|
Events
beforeClose( event, ui )Type: dialogbeforeclose
Initialize the dialog with the beforeClose callback specified:
1
2
3
|
|
Bind an event listener to the dialogbeforeclose event:
1
|
|
close( event, ui )Type: dialogclose
Initialize the dialog with the close callback specified:
1
2
3
|
|
Bind an event listener to the dialogclose event:
1
|
|
create( event, ui )Type: dialogcreate
Initialize the dialog with the create callback specified:
1
2
3
|
|
Bind an event listener to the dialogcreate event:
1
|
|
drag( event, ui )Type: dialogdrag
Initialize the dialog with the drag callback specified:
1
2
3
|
|
Bind an event listener to the dialogdrag event:
1
|
|
dragStart( event, ui )Type: dialogdragstart
Initialize the dialog with the dragStart callback specified:
1
2
3
|
|
Bind an event listener to the dialogdragstart event:
1
|
|
dragStop( event, ui )Type: dialogdragstop
Initialize the dialog with the dragStop callback specified:
1
2
3
|
|
Bind an event listener to the dialogdragstop event:
1
|
|
focus( event, ui )Type: dialogfocus
Initialize the dialog with the focus callback specified:
1
2
3
|
|
Bind an event listener to the dialogfocus event:
1
|
|
open( event, ui )Type: dialogopen
Initialize the dialog with the open callback specified:
1
2
3
|
|
Bind an event listener to the dialogopen event:
1
|
|
resize( event, ui )Type: dialogresize
Initialize the dialog with the resize callback specified:
1
2
3
|
|
Bind an event listener to the dialogresize event:
1
|
|
resizeStart( event, ui )Type: dialogresizestart
Initialize the dialog with the resizeStart callback specified:
1
2
3
|
|
Bind an event listener to the dialogresizestart event:
1
|
|
resizeStop( event, ui )Type: dialogresizestop
Initialize the dialog with the resizeStop callback specified:
1
2
3
|
|
Bind an event listener to the dialogresizestop event:
1
|
|
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
|
|