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 }); |