Categories

.dialog()

Categories: UI

.dialog( [ options ] )

Plugin: jQuery.ui.dialog

Description: Apply the Dialog widget for each element in the set of matched elements

  • .dialog( [ options ] )

    version added: 1.0

    options   A map of additional options pass to the widget.

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.

A call to $(foo).dialog() will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with: $(foo).dialog({ autoOpen: false }) and open it with $(foo).dialog('open'). To close it, use $(foo).dialog('close'). A more in-depth explanation with a full demo is available on the Nemikor blog.

  • disabled

    Disables (true) or enables (false) the dialog. Can be set when initialising (first creating) the dialog.

    Default: false

  • autoOpen

    When autoOpen is true the dialog will open automatically when dialog is called. If false it will stay hidden until .dialog("open") is called on it.

    Default: true

  • buttons

    Specifies which buttons should be displayed 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: { }

  • buttons

    Specifies which buttons should be displayed on the dialog. Each element of the array must be an Object defining the properties to set on the button.

    Default: [ ]

  • closeOnEscape

    Specifies whether the dialog should close when it has focus and the user presses the esacpe (ESC) key.

    Default: true

  • closeText

    Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme.

    Default: 'close'

  • dialogClass

    The specified class name(s) will be added to the dialog, for additional theming.

    Default: ''

  • draggable

    If set to true, the dialog will be draggable will be draggable by the titlebar.

    Default: true

  • height

    The height of the dialog, in pixels. Specifying 'auto' is also supported to make the dialog adjust based on its content.

    Default: 'auto'

  • hide

    The effect to be used when the dialog is closed.

    Default: null

  • maxHeight

    The maximum height to which the dialog can be resized, in pixels.

    Default: false

  • maxWidth

    The maximum width to which the dialog can be resized, in pixels.

    Default: false

  • minHeight

    The minimum height to which the dialog can be resized, in pixels.

    Default: 150

  • minWidth

    The minimum width to which the dialog can be resized, in pixels.

    Default: 150

  • modal

    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.

    Default: false

  • position

    Specifies where the dialog should be displayed. Possible values:

    1) a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'.
    2) an array containing an x,y coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100])
    3) an array containing x,y position string values (e.g. ['right','top'] for top right corner).

    Default: 'center'

  • resizable

    If set to true, the dialog will be resizeable.

    Default: true

  • show

    The effect to be used when the dialog is opened.

    Default: null

  • stack

    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.

    Default: true

  • title

    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.

    Default: ''

  • width

    The width of the dialog, in pixels.

    Default: 300

  • zIndex

    The starting z-index for the dialog.

    Default: 1000

  • create

    This event is triggered when dialog is created.

  • beforeClose

    This event is triggered when a dialog attempts to close. If the beforeClose event handler (callback function) returns false, the close will be prevented.

  • open

    This event is triggered when dialog is opened.

  • focus

    This event is triggered when the dialog gains focus.

  • dragStart

    This event is triggered at the beginning of the dialog being dragged.

  • drag

    This event is triggered when the dialog is dragged.

  • dragStop

    This event is triggered after the dialog has been dragged.

  • resizeStart

    This event is triggered at the beginning of the dialog being resized.

  • resize

    This event is triggered when the dialog is resized. demo

  • resizeStop

    This event is triggered after the dialog has been resized.

  • close

    This event is triggered when the dialog is closed.

  • destroy

    • .dialog( "destroy" )

      version added: 1.0

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

  • disable

    • .dialog( "disable" )

      version added: 1.0

    Disable the dialog.

  • enable

    • .dialog( "enable" )

      version added: 1.0

    Enable the dialog.

  • option

    • .dialog( "option" , optionName , [value] )

      version added: 1.0

    Get or set any dialog option. If no value is specified, will act as a getter.

  • option

    • .dialog( "option" , options )

      version added: 1.0

    Set multiple dialog options at once by providing an options object.

  • widget

    • .dialog( "widget" )

      version added: 1.0

    Returns the .ui-dialog element.

  • close

    • .dialog( "close" )

      version added: 1.0

    Close the dialog.

  • isOpen

    • .dialog( "isOpen" )

      version added: 1.0

    Returns true if the dialog is currently open.

  • moveToTop

    • .dialog( "moveToTop" )

      version added: 1.0

    Move the dialog to the top of the dialogs stack.

  • open

    • .dialog( "open" )

      version added: 1.0

    Open the dialog.