{{UIAPIPlugin|
|plugin=dialog
|name=Dialog
|eventPrefix=dialog
|dependencies=
<ul>
<li>UI Core</li>
<li>UI Position</li>
<li>UI Widget</li>
<li>UI Mouse (Optional; only needed if using UI Draggable or UI Resizable)</li>
<li>UI Draggable (Optional)</li>
<li>UI Resizable (Optional)</li>
</ul>
|overview=
<p>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.</p>

<p>If the content length exceeds the maximum height, a scrollbar will automatically appear.</p>

<p>A bottom button bar and semi-transparent modal overlay layer are common options that can be added.</p>

<p>A call to <code>$(foo).dialog()</code> 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: <code>$(foo).dialog({ autoOpen: false })</code> and open it with <code>$(foo).dialog('open')</code>. To close it, use <code>$(foo).dialog('close')</code>. A more in-depth explanation with a full demo is available on [http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ the Nemikor blog].</p>
|example=
{{UIAPIPluginOverviewExample|
|height=300
|desc=A simple jQuery UI Dialog.
|code=<nowiki>$("#dialog").dialog();</nowiki>
|html=<nowiki>
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
</nowiki>
}}
|options={{UIAPIPluginOption|dialog|autoOpen|Boolean|true|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.|false|}}
{{UIAPIPluginOption|dialog|buttons|Object|<nowiki>{ }</nowiki>|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.
|<nowiki>{ "Ok": function() { $(this).dialog("close"); } }</nowiki>|}}
{{UIAPIPluginOption|dialog|buttons|Array|<nowiki>[ ]</nowiki>|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.
|<nowiki>[
    {
        text: "Ok",
        click: function() { $(this).dialog("close"); }
    }
]</nowiki>|}}
{{UIAPIPluginOption|dialog|closeOnEscape|Boolean|true|Specifies whether the dialog should close when it has focus and the user presses the esacpe (ESC) key.|false|}}
{{UIAPIPluginOption|dialog|closeText|String|<nowiki>"close"</nowiki>|Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme.|<nowiki>'hide'</nowiki>|}}
{{UIAPIPluginOption|dialog|dialogClass|String|<nowiki>""</nowiki>|The specified class name(s) will be added to the dialog, for additional theming.|"alert"|}}
{{UIAPIPluginOption|dialog|draggable|Boolean|true|If set to true, the dialog will be draggable will be draggable by the titlebar.|false|}}
{{UIAPIPluginOption|dialog|height|Number|"auto"|The height of the dialog, in pixels. Specifying <nowiki>'auto'</nowiki> is also supported to make the dialog adjust based on its content.|530|}}
{{UIAPIPluginOption|dialog|hide|String|null|The effect to be used when the dialog is closed.|"slide"|}}
{{UIAPIPluginOption|dialog|hide|Object|null|The effect to be used when the dialog is closed.|{ effect: 'drop', direction: "down" }|}}
{{UIAPIPluginOption|dialog|maxHeight|Number|false|The maximum height to which the dialog can be resized, in pixels.|400|}}
{{UIAPIPluginOption|dialog|maxWidth|Number|false|The maximum width to which the dialog can be resized, in pixels.|600|}}
{{UIAPIPluginOption|dialog|minHeight|Number|150|The minimum height to which the dialog can be resized, in pixels.|300|}}
{{UIAPIPluginOption|dialog|minWidth|Number|150|The minimum width to which the dialog can be resized, in pixels.|400|}}
{{UIAPIPluginOption|dialog|modal|Boolean|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.|true|}}
{{UIAPIPluginOption|dialog|position|String, Array|"center"|Specifies where the dialog should be displayed. Possible values: <br>1) a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'. <br>2) an array containing an <em>x,y</em> coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100]) <br>3) an array containing <em>x,y</em> position string values (e.g. ['right','top'] for top right corner).|"top"|}}
{{UIAPIPluginOption|dialog|resizable|Boolean|true|If set to true, the dialog will be resizable.|false|}}
{{UIAPIPluginOption|dialog|show|String|null|The effect to be used when the dialog is opened.|"slide"|}}
{{UIAPIPluginOption|dialog|show|Object|null|The effect to be used when the dialog is opened.|{ effect: 'drop', direction: "up" }|}}
{{UIAPIPluginOption|dialog|stack|Boolean|true|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.|false|}}
{{UIAPIPluginOption|dialog|title|String|<nowiki>""</nowiki>|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.|"Dialog Title"|}}
{{UIAPIPluginOption|dialog|width|Number|300|The width of the dialog, in pixels.|460|}}
{{UIAPIPluginOption|dialog|zIndex|Integer|1000|The starting z-index for the dialog.|3999|
}}
|events={{UIAPIPluginEvent|
|plugin=dialog
|event=beforeClose
|type=dialogbeforeclose
|description=This event is triggered when a dialog attempts to close. If the beforeClose event handler (callback function) returns false, the close will be prevented.
|
}}
{{UIAPIPluginEvent|
|plugin=dialog
|event=open
|type=dialogopen
|description=This event is triggered when dialog is opened.
|
}}
{{UIAPIPluginEvent|
|plugin=dialog
|event=focus
|type=dialogfocus
|description=This event is triggered when the dialog gains focus.
|
}}
{{UIAPIPluginEvent|
|plugin=dialog
|event=dragStart
|type=dialogdragstart
|description=This event is triggered at the beginning of the dialog being dragged.
|
}}
{{UIAPIPluginEvent|
|plugin=dialog
|event=drag
|type=dialogdrag
|description=This event is triggered when the dialog is dragged.
|
}}
{{UIAPIPluginEvent|
|plugin=dialog
|event=dragStop
|type=dialogdragstop
|description=This event is triggered after the dialog has been dragged.
|
}}
{{UIAPIPluginEvent|
|plugin=dialog
|event=resizeStart
|type=dialogresizestart
|description=This event is triggered at the beginning of the dialog being resized.
|
}}
{{UIAPIPluginEvent|
|plugin=dialog
|event=resize
|type=dialogresize
|description=This event is triggered when the dialog is resized. [http://www.jsfiddle.net/Jp7TM/18/ demo]
|
}}
{{UIAPIPluginEvent|
|plugin=dialog
|event=resizeStop
|type=dialogresizestop
|description=This event is triggered after the dialog has been resized.
|
}}
{{UIAPIPluginEvent|
|plugin=dialog
|event=close
|type=dialogclose
|description=This event is triggered when the dialog is closed.
|
}}
|methods={{UIAPIPluginMethod|
|plugin=dialog
|method=close
|description=Close the dialog.
}}
{{UIAPIPluginMethod|
|plugin=dialog
|method=isOpen
|description=Returns true if the dialog is currently open.
}}
{{UIAPIPluginMethod|
|plugin=dialog
|method=moveToTop
|description=Move the dialog to the top of the dialogs stack.
}}
{{UIAPIPluginMethod|
|plugin=dialog
|method=open
|description=Open the dialog.
}}
|theming={{UIAPIPluginTheming|
|plugin=dialog
|name=Dialog
|before=&lt;div&gt;&lt;/div&gt;
|after=&lt;div class=&quot;<strong>ui-dialog</strong> ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable&quot;&gt;<br/>
&nbsp;&nbsp;&nbsp;&lt;div class=&quot;<strong>ui-dialog-titlebar</strong> ui-widget-header ui-corner-all ui-helper-clearfix&quot;&gt;<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=&quot;<strong>ui-dialog-title-dialog</strong>&quot; class=&quot;ui-dialog-title&quot;&gt;Dialog title&lt;/span&gt;<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=&quot;<strong>ui-dialog-titlebar-close</strong> ui-corner-all&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;ui-icon ui-icon-closethick&quot;&gt;close&lt;/span&gt;&lt;/a&gt;<br/>
&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br/>
&nbsp;&nbsp;&nbsp;&lt;div style=&quot;height: 200px; min-height: 109px; width: auto;&quot; class=&quot;<strong>ui-dialog-content</strong> ui-widget-content&quot; id=&quot;dialog&quot;&gt;<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Dialog content goes here.&lt;/p&gt;<br/>
&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br/>
&lt;/div&gt;<br/>
|
}}
}}