jQuery UI Library Dialog
Syntax
- $( ".selector" ).dialog( "option", "disabled" ); // Option Getter, specific
- $( ".selector" ).dialog( "option" ); // Option Getter all
- $( ".selector" ).dialog( "option", "disabled", true ); // Option Setter, specific
- $( ".selector" ).dialog( "option", { disabled: true } ); // Option Setter, multiple
- $( ".selector" ).dialog( "close" ); // Triggers close
- $( ".selector" ).dialog({ close: function() {} }); // Close overloading
- $( ".selector" ).on( "dialogclose", function( event, ui ) {} ); // Close overloading
Parameters
| Parameter | Description |
|---|---|
| Options | |
| appendTo | (Selector) [Default: "body"] Which element the dialog (and overlay, if modal) should be appended to. |
| autoOpen | (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. |
| buttons | (Object/Array) 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. |
| closeOnEscape | (Boolean) [Default: true] Specifies whether the dialog should close when it has focus and the user presses the escape (ESC) key. |
| closeText | (String) [Default: "close"] Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme. |
| dialogClass | (String) The specified class name(s) will be added to the dialog, for additional theming. |
| draggable | (Boolean) [Default: true] If set to true, the dialog will be draggable by the title bar. Requires the jQuery UI Draggable widget to be included. |
| height | (Number/String) [Default: "auto"] The height of the dialog. |
| hide | (Bool/Num/Str/Obj) If and how to animate the hiding of the dialog. |
| maxHeight | (Number) [Default: false] The maximum height to which the dialog can be resized, in pixels. |
| maxWidth | (Number) [Default: false] The maximum width to which the dialog can be resized, in pixels. |
| minHeight | (Number) [Default: 150] The minimum height to which the dialog can be resized, in pixels. |
| minWidth | (Number) [Default: 150] The minimum width to which the dialog can be resized, in pixels. |
| modal | (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. |
| position | (Object) [Default: { my: "center", at: "center", of: window }] Specifies where the dialog should be displayed when opened. The dialog will handle collisions such that as much of the dialog is visible as possible. |
| resizable | (Boolean) [Default: true] If set to true, the dialog will be resizable. Requires the jQuery UI Resizable widget to be included. |
| show | (Bool/Num/Str/Obj) If and how to animate the showing of the dialog. |
| title | (String) Specifies the title of the dialog. If the value is null, the title attribute on the dialog source element will be used. |
| width | (Number) [Default: 300] The width of the dialog, in pixels. |
| Methods | |
| close | Closes the dialog. |
| destroy | Removes the dialog functionality completely. This will return the element back to its pre-init state. |
| instance | Retrieves the dialog's instance object. If the element does not have an associated instance, undefined is returned. |
| isOpen | Whether the dialog is currently open. |
| moveToTop | Moves the dialog to the top of the dialog stack. |
| open | Opens the dialog. |
| option | Gets the value currently associated with the specified optionName. |
| option | Gets an object containing key/value pairs representing the current dialog options hash. |
| option | Sets one or more options for the dialog. |
| widget | Returns a jQuery object containing the generated wrapper. |
| Extension Points | |
| _allowInteraction | (event) Modal dialogs do not allow users to interact with elements behind the dialog. This can be problematic for elements that are not children of the dialog, but are absolutely positioned to appear as though they are. The _allowInteraction() method determines whether the user should be allowed to interact with a given target element; therefore, it can be used to whitelist elements that are not children of the dialog but you want users to be able to use. |
| 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 { position, offset }) Triggered while the dialog is being dragged. |
| dragStart | (event, ui { position, offset }) Triggered when the user starts dragging the dialog. |
| dragStop | (event, ui { position, offset }) Triggered after the dialog has been dragged. |
| focus | (event, ui) Triggered when the dialog gains focus. |
| open | (event, ui) Triggered when the dialog is opened. |
| resize | (event, ui { originalPosition, position, originalSize, size }) Triggered while the dialog is being resized. |
| resizeStart | (event, ui { originalPosition, position, originalSize, size }) Triggered while the dialog is being resized. |
| resizeStop | (event, ui { originalPosition, position, originalSize, size }) Triggered while the dialog is being resized. |
Remarks
Parameter Source: http://api.jqueryui.com/dialog/
