JQueryUI - Day 9 (Dialog)

Option

Description

Example

autoOpen

If set to true, the dialog will automatically open upon initialization. When false, the dialog box will be opened upon a call to dialog('open'). By default its value is true.

$("#dialog-1").dialog({

autoOpen: false

});

button

Specifies which buttons should be displayed on the dialog. These are listed as objects, and each property is the text on the button.

$("#dialog-1").dialog({

buttons: [

{

text: "Ok",

icons: {

primary: " ui-icon-mail-closed"

},

click: function () {

$(this).dialog("close");

}

}

]

});

closeOnEscape

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

$("#dialog-1").dialog({

closeOnEscape: false

});

closeText

Specifies the text for the close button.

$("#dialog-1").dialog({

closeText:"Close"

});

dialogClass

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

$("#dialog-1").dialog({

dialogClass: "alert"

});

draggable

If set to false dialog box will not be draggable by clicking and dragging the title bar.

$("#dialog-1").dialog({

draggable: false

});

height

The height of the dialog.

$("#dialog-1").dialog({

height: 300

});

hide

This option is used to set the effect to be used when the dialog box is closed. By default its value is null.

$("#dialog-1").dialog({

hide: { effect:"explode", duration: 1300 }

});

maxHeight

The maximum height to which the dialog can be resized.

$("#dialog-1").dialog({

maxHeight: 400

});

maxWidth

The maximum width to which the dialog can be resized.

$("#dialog-1").dialog({

maxWidth: 400

});

minHeight

The minimum height to which the dialog can be resized.

$("#dialog-1").dialog({

minHeight: 600

});

minWidth

The minimum width to which the dialog can be resized

$("#dialog-1").dialog({

minWidth: 600

});

modal

If this option is set to true the dialog will have modal behavior and other items on the page will be disabled.

$("#dialog-1").dialog({

modal:true

});

position

Specifies where the dialog should be displayed when opened. Default value is { my: "center", at: "center", of: window }

$("#dialog-1").dialog({

position:{ my: "center", at:"center", of: window }

});

resizable

If set to true then dialog box can be resized. By default its value is true.

$("#dialog-1").dialog({

resizable: false

});

show

Define If and how to animate the showing of the dialog. By default its value is null.

$("#dialog-1").dialog({

show: { effect: "blind", duration: 500 }

});

title

Specifies the title of the dialog.

$("#dialog-1").dialog({

title: "Dialog Box"

});

width

The width of the dialog in pixels.

$("#dialog-1").dialog({

width:400

});

Method

Description

Example

close()

Closes the dialog.

$("#dialog-1").dialog("close");

destroy()

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

$("#dialog-1").dialog("destroy");

instance()

Retrieves the dialog's instance object.

Varobj=$("#dialog-1").dialog("instance");

isOpen()

Check whether the dialog is currently open.

Varobj=$("#dialog-1").dialog("isOpen");

moveToTop()

Moves the dialog to the top of the dialog stack.

$("#dialog-1").dialog("moveToTop");

open()

Opens the dialog.

$("#dialog-1").dialog("open");

option(option_Name)

Gets the value currently associated with the specifiedoptionName.

Varobj=$("#dialog-1").dialog("maxHeight");

option()

Gets an object containing key/value pairs representing the current dialog options

Varobj=$("#dialog-1").dialog();

option(option_name,value)

Sets the value of the dialog option associated with the specified optionName.

Varobj=$("#dialog-1").dialog("maxHeight",100);

widget()

Returns a jQuery object of dialog()

$("#dialog-1").dialog("widget");