Google Git
Sign in
apache / james-site / a92fa6ef34b4ad4bdd3caff9c602c28281ff6677 / . / content / development-bundle / docs / dialog.html
blob: 3e124308924c96f3495b3227d8177e73154e4df2 [file] [log] [blame]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI dialog documentation</title>
<style>
body {
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
}
.gutter {
display: none;
}
</style>
</head>
<body>
<script>{
"title":
"Dialog Widget",
"excerpt":
"Open content in an interactive overlay.",
"termSlugs": {
"category": [
"widgets"
]
}
}</script><article id="dialog1" class="entry widget"><h2 class="section-title">
<span>Dialog Widget</span><span class="version-details">version added: 1.0</span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>Description: </strong>Open content in an interactive overlay.</p>
<section id="quick-nav"><header><h2>QuickNav<a href="#entry-examples">Examples</a>
</h2></header><div class="quick-nav-section">
<h3>Options</h3>
<div><a href="#option-autoOpen">autoOpen</a></div>
<div><a href="#option-buttons">buttons</a></div>
<div><a href="#option-closeOnEscape">closeOnEscape</a></div>
<div><a href="#option-closeText">closeText</a></div>
<div><a href="#option-dialogClass">dialogClass</a></div>
<div><a href="#option-draggable">draggable</a></div>
<div><a href="#option-height">height</a></div>
<div><a href="#option-hide">hide</a></div>
<div><a href="#option-maxHeight">maxHeight</a></div>
<div><a href="#option-maxWidth">maxWidth</a></div>
<div><a href="#option-minHeight">minHeight</a></div>
<div><a href="#option-minWidth">minWidth</a></div>
<div><a href="#option-modal">modal</a></div>
<div><a href="#option-position">position</a></div>
<div><a href="#option-resizable">resizable</a></div>
<div><a href="#option-show">show</a></div>
<div><a href="#option-stack">stack</a></div>
<div><a href="#option-title">title</a></div>
<div><a href="#option-width">width</a></div>
<div><a href="#option-zIndex">zIndex</a></div>
</div>
<div class="quick-nav-section">
<h3>Methods</h3>
<div><a href="#method-close">close</a></div>
<div><a href="#method-destroy">destroy</a></div>
<div><a href="#method-isOpen">isOpen</a></div>
<div><a href="#method-moveToTop">moveToTop</a></div>
<div><a href="#method-open">open</a></div>
<div><a href="#method-option">option</a></div>
<div><a href="#method-widget">widget</a></div>
</div>
<div class="quick-nav-section">
<h3>Events</h3>
<div><a href="#event-beforeClose">beforeClose</a></div>
<div><a href="#event-close">close</a></div>
<div><a href="#event-create">create</a></div>
<div><a href="#event-drag">drag</a></div>
<div><a href="#event-dragStart">dragStart</a></div>
<div><a href="#event-dragStop">dragStop</a></div>
<div><a href="#event-focus">focus</a></div>
<div><a href="#event-open">open</a></div>
<div><a href="#event-resize">resize</a></div>
<div><a href="#event-resizeStart">resizeStart</a></div>
<div><a href="#event-resizeStop">resizeStop</a></div>
</div></section><div class="longdesc" id="entry-longdesc">
<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>
<h3>Dependencies</h3>
<ul>
<li><a href="/category/ui-core/">UI Core</a></li>
<li><a href="/jQuery.widget/">Widget Factory</a></li>
<li><a href="/position/">Position</a></li>
<li><a href="/button/">Button</a></li>
<li>
<a href="/draggable/">Draggable</a> (optional; for use with the <a href="#option-draggable"><code>draggable</code></a> option)</li>
<li>
<a href="/resizable/">Resizable</a> (optional; for use with the <a href="#option-resizable"><code>resizable</code></a> option)</li>
<li>
<a href="/category/effects-core/">Effects Core</a> (optional; for use with the <a href="#option-show"><code>show</code></a> and <a href="#option-hide"><code>hide</code></a> options)</li>
</ul>
</div>
<h3>Additional Notes:</h3>
<div class="longdesc"><ul><li>
This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
</li></ul></div>
<section id="options"><header><h2>Options</h2></header><div id="option-autoOpen" class="api-item first-item">
<h3>autoOpen<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>true</code>
</div>
<div>If set to <code>true</code>, the dialog will automatically open upon initialization. If <code>false</code>, the dialog will stay hidden until the <a href="#method-open"><code>open()</code></a> method is called.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>autoOpen</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ autoOpen: <span class="literal">false</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Get or set the <code>autoOpen</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> autoOpen = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"autoOpen"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"autoOpen"</span>, <span class="literal">false</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option-buttons" class="api-item">
<h3>buttons<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Object">Object</a> or <a href="http://api.jquery.com/Types/#Array">Array</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>{}</code>
</div>
<div>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.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Object</strong>: The keys are the button labels and the values are the callbacks for when the associated button is clicked.</li>
<li>
<strong>Array</strong>: Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>buttons</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ buttons: [ { text: <span class="string">"Ok"</span>, click: <span class="keyword">function</span>() { $( <span class="keyword">this</span> ).dialog( <span class="string">"close"</span> ); } } ] });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Get or set the <code>buttons</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> buttons = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"buttons"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"buttons"</span>, [ { text: <span class="string">"Ok"</span>, click: <span class="keyword">function</span>() { $( <span class="keyword">this</span> ).dialog( <span class="string">"close"</span> ); } } ] );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option-closeOnEscape" class="api-item">
<h3>closeOnEscape<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>true</code>
</div>
<div>Specifies whether the dialog should close when it has focus and the user presses the escape (ESC) key.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>closeOnEscape</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ closeOnEscape: <span class="literal">false</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Get or set the <code>closeOnEscape</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> closeOnEscape = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"closeOnEscape"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"closeOnEscape"</span>, <span class="literal">false</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option-closeText" class="api-item">
<h3>closeText<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String">String</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>"close"</code>
</div>
<div>Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>closeText</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ closeText: <span class="string">"hide"</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Get or set the <code>closeText</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> closeText = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"closeText"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"closeText"</span>, <span class="string">"hide"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option-dialogClass" class="api-item">
<h3>dialogClass<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String">String</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>""</code>
</div>
<div>The specified class name(s) will be added to the dialog, for additional theming.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>dialogClass</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ dialogClass: <span class="string">"alert"</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Get or set the <code>dialogClass</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> dialogClass = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"dialogClass"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"dialogClass"</span>, <span class="string">"alert"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option-draggable" class="api-item">
<h3>draggable<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>true</code>
</div>
<div>If set to <code>true</code>, the dialog will be draggable by the title bar. Requires the <a href="/draggable/">jQuery UI Draggable wiget</a> to be included.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>draggable</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ draggable: <span class="literal">false</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Get or set the <code>draggable</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> draggable = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"draggable"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"draggable"</span>, <span class="literal">false</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option-height" class="api-item">
<h3>height<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a> or <a href="http://api.jquery.com/Types/#String">String</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>"auto"</code>
</div>
<div>The height of the dialog.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Number</strong>: The height in pixels.</li>
<li>
<strong>String</strong>: The only supported string value is <code>"auto"</code> which will allow the dialog height to adjust based on its content.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>height</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ height: <span class="number">400</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Get or set the <code>height</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> height = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"height"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"height"</span>, <span class="number">400</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option-hide" class="api-item">
<h3>hide<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a> or <a href="http://api.jquery.com/Types/#String">String</a> or <a href="http://api.jquery.com/Types/#Object">Object</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>null</code>
</div>
<div>If and how to animate the hiding of the dialog.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Number</strong>:
The dialog will fade out while animating the height and width for the specified duration.
</li>
<li>
<strong>String</strong>:
The dialog will be hidden using the specified jQuery UI effect. See the <a href="/category/effects/">list of effects</a> for possible values.
</li>
<li>
<strong>Object</strong>: If the value is an object, then <code>effect</code>, <code>duration</code>, and <code>easing</code> properties may be provided. The <code>effect</code> property must be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If <code>duration</code> or <code>easing</code> is omitted, then the default values will be used.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>hide</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ hide: <span class="string">"explode"</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Get or set the <code>hide</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> hide = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"hide"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"hide"</span>, <span class="string">"explode"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option-maxHeight" class="api-item">
<h3>maxHeight<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>The maximum height to which the dialog can be resized, in pixels.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>maxHeight</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ maxHeight: <span class="number">600</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Get or set the <code>maxHeight</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> maxHeight = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"maxHeight"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"maxHeight"</span>, <span class="number">600</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option-maxWidth" class="api-item">
<h3>maxWidth<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>The maximum width to which the dialog can be resized, in pixels.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>maxWidth</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ maxWidth: <span class="number">600</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Get or set the <code>maxWidth</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> maxWidth = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"maxWidth"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"maxWidth"</span>, <span class="number">600</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option-minHeight" class="api-item">
<h3>minHeight<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>150</code>
</div>
<div>The minimum height to which the dialog can be resized, in pixels.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>minHeight</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ minHeight: <span class="number">200</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Get or set the <code>minHeight</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> minHeight = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"minHeight"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"minHeight"</span>, <span class="number">200</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option-minWidth" class="api-item">
<h3>minWidth<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>150</code>
</div>
<div>The minimum width to which the dialog can be resized, in pixels.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>minWidth</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ minWidth: <span class="number">200</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Get or set the <code>minWidth</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> minWidth = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"minWidth"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"minWidth"</span>, <span class="number">200</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option-modal" class="api-item">
<h3>modal<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>If set to <code>true</code>, 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.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>modal</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ modal: <span class="literal">true</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Get or set the <code>modal</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> modal = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"modal"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"modal"</span>, <span class="literal">true</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option-position" class="api-item">
<h3>position<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Object">Object</a> or <a href="http://api.jquery.com/Types/#String">String</a> or <a href="http://api.jquery.com/Types/#Array">Array</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>{ my: "center", at: "center", of: window }</code>
</div>
<div>Specifies where the dialog should be displayed. The dialog will handle collisions such that as much of the dialog is visible as possible.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Object</strong>: Identifies the position of the dialog when opened. The <code>of</code> option defaults to the window, but you can specify another element to position against. You can refer to the <a href="/position">jQuery UI Position</a> utility for more details about the various options.</li>
<li>
<strong>String</strong>: A string representing the position within the viewport. Possible values: <code>"center"</code>, <code>"left"</code>, <code>"right"</code>, <code>"top"</code>, <code>"bottom"</code>.</li>
<li>
<strong>Array</strong>: An array containing an <em>x, y</em> coordinate pair in pixel offset from the top left corner of the viewport or the name of a possible string value.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>position</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ position: { my: <span class="string">"left top"</span>, at: <span class="string">"left bottom"</span>, of: button } });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Get or set the <code>position</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> position = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"position"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"position"</span>, { my: <span class="string">"left top"</span>, at: <span class="string">"left bottom"</span>, of: button } );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option-resizable" class="api-item">
<h3>resizable<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>true</code>
</div>
<div>If set to <code>true</code>, the dialog will be resizable. Requires the <a href="/resizable/">jQuery UI Resizable widget</a> to be included.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>resizable</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ resizable: <span class="literal">false</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Get or set the <code>resizable</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> resizable = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"resizable"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"resizable"</span>, <span class="literal">false</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option-show" class="api-item">
<h3>show<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a> or <a href="http://api.jquery.com/Types/#String">String</a> or <a href="http://api.jquery.com/Types/#Object">Object</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>null</code>
</div>
<div>If and how to animate the showing of the dialog.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Number</strong>:
The dialog will fade in while animating the height and width for the specified duration.
</li>
<li>
<strong>String</strong>:
The dialog will be shown using the specified jQuery UI effect. See the <a href="/category/effects/">list of effects</a> for possible values.
</li>
<li>
<strong>Object</strong>: If the value is an object, then <code>effect</code>, <code>duration</code>, and <code>easing</code> properties may be provided. The <code>effect</code> property must be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If <code>duration</code> or <code>easing</code> is omitted, then the default values will be used.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>show</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ show: <span class="string">"slow"</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Get or set the <code>show</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> show = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"show"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"show"</span>, <span class="string">"slow"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option-stack" class="api-item">
<h3>stack<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>true</code>
</div>
<div>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.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>stack</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ stack: <span class="literal">false</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Get or set the <code>stack</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> stack = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"stack"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"stack"</span>, <span class="literal">false</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option-title" class="api-item">
<h3>title<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String">String</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>""</code>
</div>
<div>Specifies the title of the dialog. Any valid HTML may be set as the title. The title can also be specified by the <code>title</code> attribute on the dialog source element.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>title</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ title: <span class="string">"Dialog Title"</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Get or set the <code>title</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> title = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"title"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"title"</span>, <span class="string">"Dialog Title"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option-width" class="api-item">
<h3>width<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>300</code>
</div>
<div>The width of the dialog, in pixels.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>width</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ width: <span class="number">500</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Get or set the <code>width</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> width = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"width"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"width"</span>, <span class="number">500</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option-zIndex" class="api-item">
<h3>zIndex<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Integer">Integer</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>1000</code>
</div>
<div>The starting z-index for the dialog.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>zIndex</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ zIndex: <span class="number">20</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Get or set the <code>zIndex</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> zIndex = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"zIndex"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"zIndex"</span>, <span class="number">20</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div></section><section id="methods"><header><h2>Methods</h2></header><div id="method-close"><div class="api-item first-item">
<h3>close()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>Closes the dialog.</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the close method:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"close"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div></div>
<div id="method-destroy"><div class="api-item">
<h3>destroy()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>
Removes the dialog functionality completely. This will return the element back to its pre-init state.
</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the destroy method:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"destroy"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div></div>
<div id="method-isOpen"><div class="api-item">
<h3>isOpen()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
</h3>
<div>Whether the dialog is currently open.</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the isOpen method:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> isOpen = $( <span class="string">".selector"</span> ).dialog( <span class="string">"isOpen"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div></div>
<div id="method-moveToTop"><div class="api-item">
<h3>moveToTop()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>Moves the dialog to the top of the dialog stack.</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the moveToTop method:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"moveToTop"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div></div>
<div id="method-open"><div class="api-item">
<h3>open()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>Opens the dialog.</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the open method:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"open"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div></div>
<div id="method-option">
<div class="api-item">
<h3>option( optionName )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Object">Object</a></span>
</h3>
<div>Gets the value currently associated with the specified <code>optionName</code>.</div>
<ul><li>
<div><strong>optionName</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
</div>
<div>The name of the option to get.</div>
</li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the method:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> isDisabled = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"disabled"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="api-item">
<h3>option()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#PlainObject">PlainObject</a></span>
</h3>
<div>Gets an object containing key/value pairs representing the current dialog options hash.</div>
<ul><li><div class="null-signature">This signature does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the method:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> options = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="api-item">
<h3>option( optionName, value )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>Sets the value of the dialog option associated with the specified <code>optionName</code>.</div>
<ul>
<li>
<div><strong>optionName</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
</div>
<div>The name of the option to set.</div>
</li>
<li>
<div><strong>value</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>A value to set for the option.</div>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Invoke the method:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"disabled"</span>, <span class="literal">true</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="api-item">
<h3>option( options )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>Sets one or more options for the dialog.</div>
<ul><li>
<div><strong>options</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>A map of option-value pairs to set.</div>
</li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the method:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, { disabled: <span class="literal">true</span> } );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="method-widget"><div class="api-item">
<h3>widget()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
</h3>
<div>
Returns a <code>jQuery</code> object containing the generated wrapper.
</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the widget method:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> widget = $( <span class="string">".selector"</span> ).dialog( <span class="string">"widget"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div></div></section><section id="events"><header><h2>Events</h2></header><div id="event-beforeClose" class="api-item first-item">
<h3>beforeClose( event, ui )<span class="returns">Type: <code>dialogbeforeclose</code></span>
</h3>
<div>Triggered when a dialog is about to close. If canceled, the dialog will not close.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
</li>
</ul>
<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the beforeClose callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code> beforeClose: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Bind an event listener to the dialogbeforeclose event:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogbeforeclose"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="event-close" class="api-item">
<h3>close( event, ui )<span class="returns">Type: <code>dialogclose</code></span>
</h3>
<div>Triggered when the dialog is closed.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
</li>
</ul>
<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the close callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code> close: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Bind an event listener to the dialogclose event:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogclose"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="event-create" class="api-item">
<h3>create( event, ui )<span class="returns">Type: <code>dialogcreate</code></span>
</h3>
<div>
Triggered when the dialog is created.
</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
</li>
</ul>
<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the create callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code> create: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Bind an event listener to the dialogcreate event:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogcreate"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="event-drag" class="api-item">
<h3>drag( event, ui )<span class="returns">Type: <code>dialogdrag</code></span>
</h3>
<div>Triggered while the dialog is being dragged.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current CSS position of the dialog.</div>
</li>
<li>
<div><strong>offset</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current offset position of the dialog.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the drag callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code> drag: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Bind an event listener to the dialogdrag event:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogdrag"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="event-dragStart" class="api-item">
<h3>dragStart( event, ui )<span class="returns">Type: <code>dialogdragstart</code></span>
</h3>
<div>Triggered when the user starts dragging the dialog.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current CSS position of the dialog.</div>
</li>
<li>
<div><strong>offset</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current offset position of the dialog.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the dragStart callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code> dragStart: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Bind an event listener to the dialogdragstart event:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogdragstart"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="event-dragStop" class="api-item">
<h3>dragStop( event, ui )<span class="returns">Type: <code>dialogdragstop</code></span>
</h3>
<div>Triggered after the dialog has been dragged.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current CSS position of the dialog.</div>
</li>
<li>
<div><strong>offset</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current offset position of the dialog.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the dragStop callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code> dragStop: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Bind an event listener to the dialogdragstop event:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogdragstop"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="event-focus" class="api-item">
<h3>focus( event, ui )<span class="returns">Type: <code>dialogfocus</code></span>
</h3>
<div>Triggered when the dialog gains focus.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
</li>
</ul>
<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the focus callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code> focus: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Bind an event listener to the dialogfocus event:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogfocus"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="event-open" class="api-item">
<h3>open( event, ui )<span class="returns">Type: <code>dialogopen</code></span>
</h3>
<div>Triggered when the dialog is opened.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
</li>
</ul>
<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the open callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code> open: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Bind an event listener to the dialogopen event:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogopen"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="event-resize" class="api-item">
<h3>resize( event, ui )<span class="returns">Type: <code>dialogresize</code></span>
</h3>
<div>Triggered while the dialog is being resized.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>originalPosition</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The CSS position of the dialog prior to being resized.</div>
</li>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current CSS position of the dialog.</div>
</li>
<li>
<div><strong>originalSize</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The size of the dialog prior to being resized.</div>
</li>
<li>
<div><strong>size</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current size of the dialog.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the resize callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code> resize: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Bind an event listener to the dialogresize event:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogresize"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="event-resizeStart" class="api-item">
<h3>resizeStart( event, ui )<span class="returns">Type: <code>dialogresizestart</code></span>
</h3>
<div>Triggered when the user starts resizing the dialog.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>originalPosition</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The CSS position of the dialog prior to being resized.</div>
</li>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current CSS position of the dialog.</div>
</li>
<li>
<div><strong>originalSize</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The size of the dialog prior to being resized.</div>
</li>
<li>
<div><strong>size</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current size of the dialog.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the resizeStart callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code> resizeStart: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Bind an event listener to the dialogresizestart event:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogresizestart"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="event-resizeStop" class="api-item">
<h3>resizeStop( event, ui )<span class="returns">Type: <code>dialogresizestop</code></span>
</h3>
<div>Triggered after the dialog has been resized.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>originalPosition</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The CSS position of the dialog prior to being resized.</div>
</li>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current CSS position of the dialog.</div>
</li>
<li>
<div><strong>originalSize</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The size of the dialog prior to being resized.</div>
</li>
<li>
<div><strong>size</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current size of the dialog.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the resizeStop callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code> resizeStop: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Bind an event listener to the dialogresizestop event:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogresizestop"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div></section><section class="entry-examples" id="entry-examples"><header><h2>Example:</h2></header><div class="entry-example" id="example-0">
<h4><span class="desc">A simple jQuery UI Dialog</span></h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!doctype html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"en"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"utf-8"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">title</span>&gt;</span>dialog demo<span class="tag">&lt;/<span class="title">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">"//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/jquery-1.8.3.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/ui/1.9.2/jquery-ui.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">"opener"</span>&gt;</span>open the dialog<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"dialog"</span> <span class="attribute">title</span>=<span class="value">"Dialog Title"</span>&gt;</span>I'm a dialog<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">"#dialog"</span> ).dialog({ autoOpen: <span class="literal">false</span> });</code></div></div><div class="container"><div class="line"><code>$( <span class="string">"#opener"</span> ).click(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> $( <span class="string">"#dialog"</span> ).dialog( <span class="string">"open"</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article>
</body>
</html>