jQuery UI Library Dialog

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

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

ParameterDescription
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 
closeCloses the dialog.
destroyRemoves the dialog functionality completely. This will return the element back to its pre-init state.
instanceRetrieves the dialog's instance object. If the element does not have an associated instance, undefined is returned.
isOpenWhether the dialog is currently open.
moveToTopMoves the dialog to the top of the dialog stack.
openOpens the dialog.
optionGets the value currently associated with the specified optionName.
optionGets an object containing key/value pairs representing the current dialog options hash.
optionSets one or more options for the dialog.
widgetReturns 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



Got any jQuery UI Library Question?