[Summary view] [Print] [Text view]

   1  <p>
   2  <ul class="UIAPIPlugin-toc">
   3  <li><a href="#overview">Overview</a></li>
   4  <li><a href="#options">Options</a></li>
   5  <li><a href="#events">Events</a></li>
   6  <li><a href="#methods">Methods</a></li>
   7  <li><a href="#theming">Theming</a></li>
   8  </ul>
   9  <div class="UIAPIPlugin">
  10    <h1>jQuery UI Dialog</h1>
  11    <div id="overview">
  12      <h2 class="top-header">Overview</h2>
  13      <div id="overview-main">
  14          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.
  15  </p><p>If the content length exceeds the maximum height, a scrollbar will automatically appear.
  16  </p><p>A bottom button bar and semi-transparent modal overlay layer are common options that can be added.
  17  </p>
  18  A call to <code>$(foo).dialog()</code> initializes a dialog. If you want a click to open a dialog, use <code>$(foo).dialog('open')</code>, but if the dialog hasn't been destroyed, the <code>$(foo).dialog()</code> init call is only required once, not on each click.
  19      </div>
  20      <div id="overview-dependencies">
  21          <h3>Dependencies</h3>
  22          <ul>
  23  <li>UI Core</li>
  24  <li>UI Draggable (Optional)</li>
  25  <li>UI Resizable (Optional)</li>
  26  </ul>
  27      </div>
  28      <div id="overview-example">
  29          <h3>Example</h3>
  30          <div id="overview-example" class="example">
  31  <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
  32  <p><div id="demo" class="tabs-container" rel="300">
  33  A simple jQuery UI Dialog.<br />
  34  </p>
  35  <pre>$(&quot;#dialog&quot;).dialog();
  36  </pre>
  37  <p></div><div id="source" class="tabs-container">
  38  </p>
  39  <pre>&lt;!DOCTYPE html&gt;
  40  &lt;html&gt;
  41  &lt;head&gt;
  42    &lt;link type=&quot;text/css&quot; href=&quot;http://jqueryui.com/latest/themes/base/ui.all.css&quot; rel=&quot;stylesheet&quot; /&gt;
  43    &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/jquery-1.3.2.js&quot;&gt;&lt;/script&gt;
  44    &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/ui.core.js&quot;&gt;&lt;/script&gt;
  45    &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/ui.draggable.js&quot;&gt;&lt;/script&gt;
  46    &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/ui.resizable.js&quot;&gt;&lt;/script&gt;
  47    &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/ui.dialog.js&quot;&gt;&lt;/script&gt;
  48    &lt;script type="text/javascript"&gt;
  49    $(document).ready(function(){
  50      $(&quot;#dialog&quot;).dialog();
  51    });
  52    &lt;/script&gt;
  53  &lt;/head&gt;
  54  &lt;body style="font-size:62.5%;"&gt;
  55    
  56  &lt;div id=&quot;dialog&quot; title=&quot;Dialog Title&quot;&gt;I'm in a dialog&lt;/div&gt;
  57  
  58  &lt;/body&gt;
  59  &lt;/html&gt;
  60  </pre>
  61  <p></div>
  62  </p><p></div>
  63      </div>
  64    </div>
  65    <div id="options">
  66      <h2 class="top-header">Options</h2>
  67      <ul class="options-list">
  68        
  69  <li class="option" id="option-autoOpen">
  70    <div class="option-header">
  71      <h3 class="option-name"><a href="#option-autoOpen">autoOpen</a></h3>
  72      <dl>
  73        <dt class="option-type-label">Type:</dt>
  74          <dd class="option-type">Boolean</dd>
  75        
  76        <dt class="option-default-label">Default:</dt>
  77          <dd class="option-default">true</dd>
  78        
  79      </dl>
  80    </div>
  81    <div class="option-description">
  82      <p>When <i>autoOpen</i> is <i>true</i> the dialog will open automatically when <i>dialog</i> is called. If <i>false</i> it will stay hidden until <i>.dialog("open")</i> is called on it.</p>
  83    </div>
  84    <div class="option-examples">
  85      <h4>Code examples</h4>
  86      <dl class="option-examples-list">
  87      
  88  <dt>
  89    Initialize a dialog with the <code>autoOpen</code> option specified.
  90  </dt>
  91  <dd>
  92  <pre><code>$('.selector').dialog({ autoOpen: false });</code></pre>
  93  </dd>
  94  
  95      
  96  <dt>
  97    Get or set the <code>autoOpen</code> option, after init.
  98  </dt>
  99  <dd>
 100  <pre><code>//getter
 101  var autoOpen = $('.selector').dialog('option', 'autoOpen');
 102  //setter
 103  $('.selector').dialog('option', 'autoOpen', false);</code></pre>
 104  </dd>
 105  
 106      </dl>
 107    </div>
 108  </li>
 109  
 110  
 111  <li class="option" id="option-bgiframe">
 112    <div class="option-header">
 113      <h3 class="option-name"><a href="#option-bgiframe">bgiframe</a></h3>
 114      <dl>
 115        <dt class="option-type-label">Type:</dt>
 116          <dd class="option-type">Boolean</dd>
 117        
 118        <dt class="option-default-label">Default:</dt>
 119          <dd class="option-default">false</dd>
 120        
 121      </dl>
 122    </div>
 123    <div class="option-description">
 124      <p>When true, the bgiframe plugin will be used, to fix the issue in IE6 where select boxes show on top of other elements, regardless of zIndex. Requires including the bgiframe plugin. Future versions may not require a separate plugin.</p>
 125    </div>
 126    <div class="option-examples">
 127      <h4>Code examples</h4>
 128      <dl class="option-examples-list">
 129      
 130  <dt>
 131    Initialize a dialog with the <code>bgiframe</code> option specified.
 132  </dt>
 133  <dd>
 134  <pre><code>$('.selector').dialog({ bgiframe: true });</code></pre>
 135  </dd>
 136  
 137      
 138  <dt>
 139    Get or set the <code>bgiframe</code> option, after init.
 140  </dt>
 141  <dd>
 142  <pre><code>//getter
 143  var bgiframe = $('.selector').dialog('option', 'bgiframe');
 144  //setter
 145  $('.selector').dialog('option', 'bgiframe', true);</code></pre>
 146  </dd>
 147  
 148      </dl>
 149    </div>
 150  </li>
 151  
 152  
 153  <li class="option" id="option-buttons">
 154    <div class="option-header">
 155      <h3 class="option-name"><a href="#option-buttons">buttons</a></h3>
 156      <dl>
 157        <dt class="option-type-label">Type:</dt>
 158          <dd class="option-type">Object</dd>
 159        
 160        <dt class="option-default-label">Default:</dt>
 161          <dd class="option-default">{ }</dd>
 162        
 163      </dl>
 164    </div>
 165    <div class="option-description">
 166      <p>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.
 167  </p>
 168    </div>
 169    <div class="option-examples">
 170      <h4>Code examples</h4>
 171      <dl class="option-examples-list">
 172      
 173  <dt>
 174    Initialize a dialog with the <code>buttons</code> option specified.
 175  </dt>
 176  <dd>
 177  <pre><code>$('.selector').dialog({ buttons: { &quot;Ok&quot;: function() { $(this).dialog(&quot;close&quot;); } } });</code></pre>
 178  </dd>
 179  
 180      
 181  <dt>
 182    Get or set the <code>buttons</code> option, after init.
 183  </dt>
 184  <dd>
 185  <pre><code>//getter
 186  var buttons = $('.selector').dialog('option', 'buttons');
 187  //setter
 188  $('.selector').dialog('option', 'buttons', { &quot;Ok&quot;: function() { $(this).dialog(&quot;close&quot;); } });</code></pre>
 189  </dd>
 190  
 191      </dl>
 192    </div>
 193  </li>
 194  
 195  
 196  <li class="option" id="option-closeOnEscape">
 197    <div class="option-header">
 198      <h3 class="option-name"><a href="#option-closeOnEscape">closeOnEscape</a></h3>
 199      <dl>
 200        <dt class="option-type-label">Type:</dt>
 201          <dd class="option-type">Boolean</dd>
 202        
 203        <dt class="option-default-label">Default:</dt>
 204          <dd class="option-default">true</dd>
 205        
 206      </dl>
 207    </div>
 208    <div class="option-description">
 209      <p>Specifies whether the dialog should close when it has focus and the user presses the esacpe (ESC) key.</p>
 210    </div>
 211    <div class="option-examples">
 212      <h4>Code examples</h4>
 213      <dl class="option-examples-list">
 214      
 215  <dt>
 216    Initialize a dialog with the <code>closeOnEscape</code> option specified.
 217  </dt>
 218  <dd>
 219  <pre><code>$('.selector').dialog({ closeOnEscape: false });</code></pre>
 220  </dd>
 221  
 222      
 223  <dt>
 224    Get or set the <code>closeOnEscape</code> option, after init.
 225  </dt>
 226  <dd>
 227  <pre><code>//getter
 228  var closeOnEscape = $('.selector').dialog('option', 'closeOnEscape');
 229  //setter
 230  $('.selector').dialog('option', 'closeOnEscape', false);</code></pre>
 231  </dd>
 232  
 233      </dl>
 234    </div>
 235  </li>
 236  
 237  
 238  <li class="option" id="option-dialogClass">
 239    <div class="option-header">
 240      <h3 class="option-name"><a href="#option-dialogClass">dialogClass</a></h3>
 241      <dl>
 242        <dt class="option-type-label">Type:</dt>
 243          <dd class="option-type">String</dd>
 244        
 245        <dt class="option-default-label">Default:</dt>
 246          <dd class="option-default">''</dd>
 247        
 248      </dl>
 249    </div>
 250    <div class="option-description">
 251      <p>The specified class name(s) will be added to the dialog, for additional theming.</p>
 252    </div>
 253    <div class="option-examples">
 254      <h4>Code examples</h4>
 255      <dl class="option-examples-list">
 256      
 257  <dt>
 258    Initialize a dialog with the <code>dialogClass</code> option specified.
 259  </dt>
 260  <dd>
 261  <pre><code>$('.selector').dialog({ dialogClass: 'alert' });</code></pre>
 262  </dd>
 263  
 264      
 265  <dt>
 266    Get or set the <code>dialogClass</code> option, after init.
 267  </dt>
 268  <dd>
 269  <pre><code>//getter
 270  var dialogClass = $('.selector').dialog('option', 'dialogClass');
 271  //setter
 272  $('.selector').dialog('option', 'dialogClass', 'alert');</code></pre>
 273  </dd>
 274  
 275      </dl>
 276    </div>
 277  </li>
 278  
 279  
 280  <li class="option" id="option-draggable">
 281    <div class="option-header">
 282      <h3 class="option-name"><a href="#option-draggable">draggable</a></h3>
 283      <dl>
 284        <dt class="option-type-label">Type:</dt>
 285          <dd class="option-type">Boolean</dd>
 286        
 287        <dt class="option-default-label">Default:</dt>
 288          <dd class="option-default">true</dd>
 289        
 290      </dl>
 291    </div>
 292    <div class="option-description">
 293      <p>If set to true, the dialog will be draggable will be draggable by the titlebar.</p>
 294    </div>
 295    <div class="option-examples">
 296      <h4>Code examples</h4>
 297      <dl class="option-examples-list">
 298      
 299  <dt>
 300    Initialize a dialog with the <code>draggable</code> option specified.
 301  </dt>
 302  <dd>
 303  <pre><code>$('.selector').dialog({ draggable: false });</code></pre>
 304  </dd>
 305  
 306      
 307  <dt>
 308    Get or set the <code>draggable</code> option, after init.
 309  </dt>
 310  <dd>
 311  <pre><code>//getter
 312  var draggable = $('.selector').dialog('option', 'draggable');
 313  //setter
 314  $('.selector').dialog('option', 'draggable', false);</code></pre>
 315  </dd>
 316  
 317      </dl>
 318    </div>
 319  </li>
 320  
 321  
 322  <li class="option" id="option-height">
 323    <div class="option-header">
 324      <h3 class="option-name"><a href="#option-height">height</a></h3>
 325      <dl>
 326        <dt class="option-type-label">Type:</dt>
 327          <dd class="option-type">Number</dd>
 328        
 329        <dt class="option-default-label">Default:</dt>
 330          <dd class="option-default">'auto'</dd>
 331        
 332      </dl>
 333    </div>
 334    <div class="option-description">
 335      <p>The height of the dialog, in pixels.</p>
 336    </div>
 337    <div class="option-examples">
 338      <h4>Code examples</h4>
 339      <dl class="option-examples-list">
 340      
 341  <dt>
 342    Initialize a dialog with the <code>height</code> option specified.
 343  </dt>
 344  <dd>
 345  <pre><code>$('.selector').dialog({ height: 530 });</code></pre>
 346  </dd>
 347  
 348      
 349  <dt>
 350    Get or set the <code>height</code> option, after init.
 351  </dt>
 352  <dd>
 353  <pre><code>//getter
 354  var height = $('.selector').dialog('option', 'height');
 355  //setter
 356  $('.selector').dialog('option', 'height', 530);</code></pre>
 357  </dd>
 358  
 359      </dl>
 360    </div>
 361  </li>
 362  
 363  
 364  <li class="option" id="option-hide">
 365    <div class="option-header">
 366      <h3 class="option-name"><a href="#option-hide">hide</a></h3>
 367      <dl>
 368        <dt class="option-type-label">Type:</dt>
 369          <dd class="option-type">String</dd>
 370        
 371        <dt class="option-default-label">Default:</dt>
 372          <dd class="option-default">null</dd>
 373        
 374      </dl>
 375    </div>
 376    <div class="option-description">
 377      <p>The effect to be used when the dialog is closed.</p>
 378    </div>
 379    <div class="option-examples">
 380      <h4>Code examples</h4>
 381      <dl class="option-examples-list">
 382      
 383  <dt>
 384    Initialize a dialog with the <code>hide</code> option specified.
 385  </dt>
 386  <dd>
 387  <pre><code>$('.selector').dialog({ hide: 'slide' });</code></pre>
 388  </dd>
 389  
 390      
 391  <dt>
 392    Get or set the <code>hide</code> option, after init.
 393  </dt>
 394  <dd>
 395  <pre><code>//getter
 396  var hide = $('.selector').dialog('option', 'hide');
 397  //setter
 398  $('.selector').dialog('option', 'hide', 'slide');</code></pre>
 399  </dd>
 400  
 401      </dl>
 402    </div>
 403  </li>
 404  
 405  
 406  <li class="option" id="option-maxHeight">
 407    <div class="option-header">
 408      <h3 class="option-name"><a href="#option-maxHeight">maxHeight</a></h3>
 409      <dl>
 410        <dt class="option-type-label">Type:</dt>
 411          <dd class="option-type">Number</dd>
 412        
 413        <dt class="option-default-label">Default:</dt>
 414          <dd class="option-default">false</dd>
 415        
 416      </dl>
 417    </div>
 418    <div class="option-description">
 419      <p>The maximum height to which the dialog can be resized, in pixels.</p>
 420    </div>
 421    <div class="option-examples">
 422      <h4>Code examples</h4>
 423      <dl class="option-examples-list">
 424      
 425  <dt>
 426    Initialize a dialog with the <code>maxHeight</code> option specified.
 427  </dt>
 428  <dd>
 429  <pre><code>$('.selector').dialog({ maxHeight: 400 });</code></pre>
 430  </dd>
 431  
 432      
 433  <dt>
 434    Get or set the <code>maxHeight</code> option, after init.
 435  </dt>
 436  <dd>
 437  <pre><code>//getter
 438  var maxHeight = $('.selector').dialog('option', 'maxHeight');
 439  //setter
 440  $('.selector').dialog('option', 'maxHeight', 400);</code></pre>
 441  </dd>
 442  
 443      </dl>
 444    </div>
 445  </li>
 446  
 447  
 448  <li class="option" id="option-maxWidth">
 449    <div class="option-header">
 450      <h3 class="option-name"><a href="#option-maxWidth">maxWidth</a></h3>
 451      <dl>
 452        <dt class="option-type-label">Type:</dt>
 453          <dd class="option-type">Number</dd>
 454        
 455        <dt class="option-default-label">Default:</dt>
 456          <dd class="option-default">false</dd>
 457        
 458      </dl>
 459    </div>
 460    <div class="option-description">
 461      <p>The maximum width to which the dialog can be resized, in pixels.</p>
 462    </div>
 463    <div class="option-examples">
 464      <h4>Code examples</h4>
 465      <dl class="option-examples-list">
 466      
 467  <dt>
 468    Initialize a dialog with the <code>maxWidth</code> option specified.
 469  </dt>
 470  <dd>
 471  <pre><code>$('.selector').dialog({ maxWidth: 600 });</code></pre>
 472  </dd>
 473  
 474      
 475  <dt>
 476    Get or set the <code>maxWidth</code> option, after init.
 477  </dt>
 478  <dd>
 479  <pre><code>//getter
 480  var maxWidth = $('.selector').dialog('option', 'maxWidth');
 481  //setter
 482  $('.selector').dialog('option', 'maxWidth', 600);</code></pre>
 483  </dd>
 484  
 485      </dl>
 486    </div>
 487  </li>
 488  
 489  
 490  <li class="option" id="option-minHeight">
 491    <div class="option-header">
 492      <h3 class="option-name"><a href="#option-minHeight">minHeight</a></h3>
 493      <dl>
 494        <dt class="option-type-label">Type:</dt>
 495          <dd class="option-type">Number</dd>
 496        
 497        <dt class="option-default-label">Default:</dt>
 498          <dd class="option-default">150</dd>
 499        
 500      </dl>
 501    </div>
 502    <div class="option-description">
 503      <p>The minimum height to which the dialog can be resized, in pixels.</p>
 504    </div>
 505    <div class="option-examples">
 506      <h4>Code examples</h4>
 507      <dl class="option-examples-list">
 508      
 509  <dt>
 510    Initialize a dialog with the <code>minHeight</code> option specified.
 511  </dt>
 512  <dd>
 513  <pre><code>$('.selector').dialog({ minHeight: 300 });</code></pre>
 514  </dd>
 515  
 516      
 517  <dt>
 518    Get or set the <code>minHeight</code> option, after init.
 519  </dt>
 520  <dd>
 521  <pre><code>//getter
 522  var minHeight = $('.selector').dialog('option', 'minHeight');
 523  //setter
 524  $('.selector').dialog('option', 'minHeight', 300);</code></pre>
 525  </dd>
 526  
 527      </dl>
 528    </div>
 529  </li>
 530  
 531  
 532  <li class="option" id="option-minWidth">
 533    <div class="option-header">
 534      <h3 class="option-name"><a href="#option-minWidth">minWidth</a></h3>
 535      <dl>
 536        <dt class="option-type-label">Type:</dt>
 537          <dd class="option-type">Number</dd>
 538        
 539        <dt class="option-default-label">Default:</dt>
 540          <dd class="option-default">150</dd>
 541        
 542      </dl>
 543    </div>
 544    <div class="option-description">
 545      <p>The minimum width to which the dialog can be resized, in pixels.</p>
 546    </div>
 547    <div class="option-examples">
 548      <h4>Code examples</h4>
 549      <dl class="option-examples-list">
 550      
 551  <dt>
 552    Initialize a dialog with the <code>minWidth</code> option specified.
 553  </dt>
 554  <dd>
 555  <pre><code>$('.selector').dialog({ minWidth: 400 });</code></pre>
 556  </dd>
 557  
 558      
 559  <dt>
 560    Get or set the <code>minWidth</code> option, after init.
 561  </dt>
 562  <dd>
 563  <pre><code>//getter
 564  var minWidth = $('.selector').dialog('option', 'minWidth');
 565  //setter
 566  $('.selector').dialog('option', 'minWidth', 400);</code></pre>
 567  </dd>
 568  
 569      </dl>
 570    </div>
 571  </li>
 572  
 573  
 574  <li class="option" id="option-modal">
 575    <div class="option-header">
 576      <h3 class="option-name"><a href="#option-modal">modal</a></h3>
 577      <dl>
 578        <dt class="option-type-label">Type:</dt>
 579          <dd class="option-type">Boolean</dd>
 580        
 581        <dt class="option-default-label">Default:</dt>
 582          <dd class="option-default">false</dd>
 583        
 584      </dl>
 585    </div>
 586    <div class="option-description">
 587      <p>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.</p>
 588    </div>
 589    <div class="option-examples">
 590      <h4>Code examples</h4>
 591      <dl class="option-examples-list">
 592      
 593  <dt>
 594    Initialize a dialog with the <code>modal</code> option specified.
 595  </dt>
 596  <dd>
 597  <pre><code>$('.selector').dialog({ modal: true });</code></pre>
 598  </dd>
 599  
 600      
 601  <dt>
 602    Get or set the <code>modal</code> option, after init.
 603  </dt>
 604  <dd>
 605  <pre><code>//getter
 606  var modal = $('.selector').dialog('option', 'modal');
 607  //setter
 608  $('.selector').dialog('option', 'modal', true);</code></pre>
 609  </dd>
 610  
 611      </dl>
 612    </div>
 613  </li>
 614  
 615  
 616  <li class="option" id="option-position">
 617    <div class="option-header">
 618      <h3 class="option-name"><a href="#option-position">position</a></h3>
 619      <dl>
 620        <dt class="option-type-label">Type:</dt>
 621          <dd class="option-type">String, Array</dd>
 622        
 623        <dt class="option-default-label">Default:</dt>
 624          <dd class="option-default">'center'</dd>
 625        
 626      </dl>
 627    </div>
 628    <div class="option-description">
 629      <p>Specifies where the dialog should be displayed. Possible values: 'center', 'left', 'right', 'top', 'bottom', or an array containing a coordinate pair (in pixel offset from top left of viewport) or the possible string values (e.g. ['right','top'] for top right corner).</p>
 630    </div>
 631    <div class="option-examples">
 632      <h4>Code examples</h4>
 633      <dl class="option-examples-list">
 634      
 635  <dt>
 636    Initialize a dialog with the <code>position</code> option specified.
 637  </dt>
 638  <dd>
 639  <pre><code>$('.selector').dialog({ position: 'top' });</code></pre>
 640  </dd>
 641  
 642      
 643  <dt>
 644    Get or set the <code>position</code> option, after init.
 645  </dt>
 646  <dd>
 647  <pre><code>//getter
 648  var position = $('.selector').dialog('option', 'position');
 649  //setter
 650  $('.selector').dialog('option', 'position', 'top');</code></pre>
 651  </dd>
 652  
 653      </dl>
 654    </div>
 655  </li>
 656  
 657  
 658  <li class="option" id="option-resizable">
 659    <div class="option-header">
 660      <h3 class="option-name"><a href="#option-resizable">resizable</a></h3>
 661      <dl>
 662        <dt class="option-type-label">Type:</dt>
 663          <dd class="option-type">Boolean</dd>
 664        
 665        <dt class="option-default-label">Default:</dt>
 666          <dd class="option-default">true</dd>
 667        
 668      </dl>
 669    </div>
 670    <div class="option-description">
 671      <p>If set to true, the dialog will be resizeable.</p>
 672    </div>
 673    <div class="option-examples">
 674      <h4>Code examples</h4>
 675      <dl class="option-examples-list">
 676      
 677  <dt>
 678    Initialize a dialog with the <code>resizable</code> option specified.
 679  </dt>
 680  <dd>
 681  <pre><code>$('.selector').dialog({ resizable: false });</code></pre>
 682  </dd>
 683  
 684      
 685  <dt>
 686    Get or set the <code>resizable</code> option, after init.
 687  </dt>
 688  <dd>
 689  <pre><code>//getter
 690  var resizable = $('.selector').dialog('option', 'resizable');
 691  //setter
 692  $('.selector').dialog('option', 'resizable', false);</code></pre>
 693  </dd>
 694  
 695      </dl>
 696    </div>
 697  </li>
 698  
 699  
 700  <li class="option" id="option-show">
 701    <div class="option-header">
 702      <h3 class="option-name"><a href="#option-show">show</a></h3>
 703      <dl>
 704        <dt class="option-type-label">Type:</dt>
 705          <dd class="option-type">String</dd>
 706        
 707        <dt class="option-default-label">Default:</dt>
 708          <dd class="option-default">null</dd>
 709        
 710      </dl>
 711    </div>
 712    <div class="option-description">
 713      <p>The effect to be used when the dialog is opened.</p>
 714    </div>
 715    <div class="option-examples">
 716      <h4>Code examples</h4>
 717      <dl class="option-examples-list">
 718      
 719  <dt>
 720    Initialize a dialog with the <code>show</code> option specified.
 721  </dt>
 722  <dd>
 723  <pre><code>$('.selector').dialog({ show: 'slide' });</code></pre>
 724  </dd>
 725  
 726      
 727  <dt>
 728    Get or set the <code>show</code> option, after init.
 729  </dt>
 730  <dd>
 731  <pre><code>//getter
 732  var show = $('.selector').dialog('option', 'show');
 733  //setter
 734  $('.selector').dialog('option', 'show', 'slide');</code></pre>
 735  </dd>
 736  
 737      </dl>
 738    </div>
 739  </li>
 740  
 741  
 742  <li class="option" id="option-stack">
 743    <div class="option-header">
 744      <h3 class="option-name"><a href="#option-stack">stack</a></h3>
 745      <dl>
 746        <dt class="option-type-label">Type:</dt>
 747          <dd class="option-type">Boolean</dd>
 748        
 749        <dt class="option-default-label">Default:</dt>
 750          <dd class="option-default">true</dd>
 751        
 752      </dl>
 753    </div>
 754    <div class="option-description">
 755      <p>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.</p>
 756    </div>
 757    <div class="option-examples">
 758      <h4>Code examples</h4>
 759      <dl class="option-examples-list">
 760      
 761  <dt>
 762    Initialize a dialog with the <code>stack</code> option specified.
 763  </dt>
 764  <dd>
 765  <pre><code>$('.selector').dialog({ stack: false });</code></pre>
 766  </dd>
 767  
 768      
 769  <dt>
 770    Get or set the <code>stack</code> option, after init.
 771  </dt>
 772  <dd>
 773  <pre><code>//getter
 774  var stack = $('.selector').dialog('option', 'stack');
 775  //setter
 776  $('.selector').dialog('option', 'stack', false);</code></pre>
 777  </dd>
 778  
 779      </dl>
 780    </div>
 781  </li>
 782  
 783  
 784  <li class="option" id="option-title">
 785    <div class="option-header">
 786      <h3 class="option-name"><a href="#option-title">title</a></h3>
 787      <dl>
 788        <dt class="option-type-label">Type:</dt>
 789          <dd class="option-type">String</dd>
 790        
 791        <dt class="option-default-label">Default:</dt>
 792          <dd class="option-default">''</dd>
 793        
 794      </dl>
 795    </div>
 796    <div class="option-description">
 797      <p>Specifies the title of the dialog. The title can also be specified by the title attribute on the dialog source element.</p>
 798    </div>
 799    <div class="option-examples">
 800      <h4>Code examples</h4>
 801      <dl class="option-examples-list">
 802      
 803  <dt>
 804    Initialize a dialog with the <code>title</code> option specified.
 805  </dt>
 806  <dd>
 807  <pre><code>$('.selector').dialog({ title: 'Dialog Title' });</code></pre>
 808  </dd>
 809  
 810      
 811  <dt>
 812    Get or set the <code>title</code> option, after init.
 813  </dt>
 814  <dd>
 815  <pre><code>//getter
 816  var title = $('.selector').dialog('option', 'title');
 817  //setter
 818  $('.selector').dialog('option', 'title', 'Dialog Title');</code></pre>
 819  </dd>
 820  
 821      </dl>
 822    </div>
 823  </li>
 824  
 825  
 826  <li class="option" id="option-width">
 827    <div class="option-header">
 828      <h3 class="option-name"><a href="#option-width">width</a></h3>
 829      <dl>
 830        <dt class="option-type-label">Type:</dt>
 831          <dd class="option-type">Number</dd>
 832        
 833        <dt class="option-default-label">Default:</dt>
 834          <dd class="option-default">300</dd>
 835        
 836      </dl>
 837    </div>
 838    <div class="option-description">
 839      <p>The width of the dialog, in pixels.</p>
 840    </div>
 841    <div class="option-examples">
 842      <h4>Code examples</h4>
 843      <dl class="option-examples-list">
 844      
 845  <dt>
 846    Initialize a dialog with the <code>width</code> option specified.
 847  </dt>
 848  <dd>
 849  <pre><code>$('.selector').dialog({ width: 460 });</code></pre>
 850  </dd>
 851  
 852      
 853  <dt>
 854    Get or set the <code>width</code> option, after init.
 855  </dt>
 856  <dd>
 857  <pre><code>//getter
 858  var width = $('.selector').dialog('option', 'width');
 859  //setter
 860  $('.selector').dialog('option', 'width', 460);</code></pre>
 861  </dd>
 862  
 863      </dl>
 864    </div>
 865  </li>
 866  
 867  
 868  <li class="option" id="option-zIndex">
 869    <div class="option-header">
 870      <h3 class="option-name"><a href="#option-zIndex">zIndex</a></h3>
 871      <dl>
 872        <dt class="option-type-label">Type:</dt>
 873          <dd class="option-type">Integer</dd>
 874        
 875        <dt class="option-default-label">Default:</dt>
 876          <dd class="option-default">1000</dd>
 877        
 878      </dl>
 879    </div>
 880    <div class="option-description">
 881      <p>The starting z-index for the dialog.</p>
 882    </div>
 883    <div class="option-examples">
 884      <h4>Code examples</h4>
 885      <dl class="option-examples-list">
 886      
 887  <dt>
 888    Initialize a dialog with the <code>zIndex</code> option specified.
 889  </dt>
 890  <dd>
 891  <pre><code>$('.selector').dialog({ zIndex: 3999 });</code></pre>
 892  </dd>
 893  
 894      
 895  <dt>
 896    Get or set the <code>zIndex</code> option, after init.
 897  </dt>
 898  <dd>
 899  <pre><code>//getter
 900  var zIndex = $('.selector').dialog('option', 'zIndex');
 901  //setter
 902  $('.selector').dialog('option', 'zIndex', 3999);</code></pre>
 903  </dd>
 904  
 905      </dl>
 906    </div>
 907  </li>
 908  
 909      </ul>
 910    </div>
 911    <div id="events">
 912      <h2 class="top-header">Events</h2>
 913      <ul class="events-list">
 914        
 915  <li class="event" id="event-beforeclose">
 916    <div class="event-header">
 917      <h3 class="event-name"><a href="#event-beforeclose">beforeclose</a></h3>
 918      <dl>
 919        <dt class="event-type-label">Type:</dt>
 920          <dd class="event-type">dialogbeforeclose</dd>
 921      </dl>
 922    </div>
 923    <div class="event-description">
 924      <p>This event is triggered when a dialog attempts to close. If the beforeclose event handler (callback function) returns false, the close will be prevented.</p>
 925    </div>
 926    <div class="event-examples">
 927      <h4>Code examples</h4>
 928      <dl class="event-examples-list">
 929      
 930  <dt>
 931    Supply a callback function to handle the <code>beforeclose</code> event as an init option.
 932  </dt>
 933  <dd>
 934  <pre><code>$('.selector').dialog({
 935     beforeclose: function(event, ui) { ... }
 936  });</code></pre>
 937  </dd>
 938  
 939      
 940  <dt>
 941    Bind to the <code>beforeclose</code> event by type: <code>dialogbeforeclose</code>.
 942  </dt>
 943  <dd>
 944  <pre><code>$('.selector').bind('dialogbeforeclose', function(event, ui) {
 945    ...
 946  });</code></pre>
 947  </dd>
 948  
 949      </dl>
 950    </div>
 951  </li>
 952  
 953  
 954  <li class="event" id="event-open">
 955    <div class="event-header">
 956      <h3 class="event-name"><a href="#event-open">open</a></h3>
 957      <dl>
 958        <dt class="event-type-label">Type:</dt>
 959          <dd class="event-type">dialogopen</dd>
 960      </dl>
 961    </div>
 962    <div class="event-description">
 963      <p>This event is triggered when dialog is opened.</p>
 964    </div>
 965    <div class="event-examples">
 966      <h4>Code examples</h4>
 967      <dl class="event-examples-list">
 968      
 969  <dt>
 970    Supply a callback function to handle the <code>open</code> event as an init option.
 971  </dt>
 972  <dd>
 973  <pre><code>$('.selector').dialog({
 974     open: function(event, ui) { ... }
 975  });</code></pre>
 976  </dd>
 977  
 978      
 979  <dt>
 980    Bind to the <code>open</code> event by type: <code>dialogopen</code>.
 981  </dt>
 982  <dd>
 983  <pre><code>$('.selector').bind('dialogopen', function(event, ui) {
 984    ...
 985  });</code></pre>
 986  </dd>
 987  
 988      </dl>
 989    </div>
 990  </li>
 991  
 992  
 993  <li class="event" id="event-focus">
 994    <div class="event-header">
 995      <h3 class="event-name"><a href="#event-focus">focus</a></h3>
 996      <dl>
 997        <dt class="event-type-label">Type:</dt>
 998          <dd class="event-type">dialogfocus</dd>
 999      </dl>
1000    </div>
1001    <div class="event-description">
1002      <p>This event is triggered when the dialog gains focus.</p>
1003    </div>
1004    <div class="event-examples">
1005      <h4>Code examples</h4>
1006      <dl class="event-examples-list">
1007      
1008  <dt>
1009    Supply a callback function to handle the <code>focus</code> event as an init option.
1010  </dt>
1011  <dd>
1012  <pre><code>$('.selector').dialog({
1013     focus: function(event, ui) { ... }
1014  });</code></pre>
1015  </dd>
1016  
1017      
1018  <dt>
1019    Bind to the <code>focus</code> event by type: <code>dialogfocus</code>.
1020  </dt>
1021  <dd>
1022  <pre><code>$('.selector').bind('dialogfocus', function(event, ui) {
1023    ...
1024  });</code></pre>
1025  </dd>
1026  
1027      </dl>
1028    </div>
1029  </li>
1030  
1031  
1032  <li class="event" id="event-dragStart">
1033    <div class="event-header">
1034      <h3 class="event-name"><a href="#event-dragStart">dragStart</a></h3>
1035      <dl>
1036        <dt class="event-type-label">Type:</dt>
1037          <dd class="event-type">dragStart</dd>
1038      </dl>
1039    </div>
1040    <div class="event-description">
1041      <p>This event is triggered at the beginning of the dialog being dragged.</p>
1042    </div>
1043    <div class="event-examples">
1044      <h4>Code examples</h4>
1045      <dl class="event-examples-list">
1046      
1047  <dt>
1048    Supply a callback function to handle the <code>dragStart</code> event as an init option.
1049  </dt>
1050  <dd>
1051  <pre><code>$('.selector').dialog({
1052     dragStart: function(event, ui) { ... }
1053  });</code></pre>
1054  </dd>
1055  
1056      
1057  <dt>
1058    Bind to the <code>dragStart</code> event by type: <code>dragStart</code>.
1059  </dt>
1060  <dd>
1061  <pre><code>$('.selector').bind('dragStart', function(event, ui) {
1062    ...
1063  });</code></pre>
1064  </dd>
1065  
1066      </dl>
1067    </div>
1068  </li>
1069  
1070  
1071  <li class="event" id="event-drag">
1072    <div class="event-header">
1073      <h3 class="event-name"><a href="#event-drag">drag</a></h3>
1074      <dl>
1075        <dt class="event-type-label">Type:</dt>
1076          <dd class="event-type">drag</dd>
1077      </dl>
1078    </div>
1079    <div class="event-description">
1080      <p>This event is triggered when the dialog is dragged.</p>
1081    </div>
1082    <div class="event-examples">
1083      <h4>Code examples</h4>
1084      <dl class="event-examples-list">
1085      
1086  <dt>
1087    Supply a callback function to handle the <code>drag</code> event as an init option.
1088  </dt>
1089  <dd>
1090  <pre><code>$('.selector').dialog({
1091     drag: function(event, ui) { ... }
1092  });</code></pre>
1093  </dd>
1094  
1095      
1096  <dt>
1097    Bind to the <code>drag</code> event by type: <code>drag</code>.
1098  </dt>
1099  <dd>
1100  <pre><code>$('.selector').bind('drag', function(event, ui) {
1101    ...
1102  });</code></pre>
1103  </dd>
1104  
1105      </dl>
1106    </div>
1107  </li>
1108  
1109  
1110  <li class="event" id="event-dragStop">
1111    <div class="event-header">
1112      <h3 class="event-name"><a href="#event-dragStop">dragStop</a></h3>
1113      <dl>
1114        <dt class="event-type-label">Type:</dt>
1115          <dd class="event-type">dragStop</dd>
1116      </dl>
1117    </div>
1118    <div class="event-description">
1119      <p>This event is triggered after the dialog has been dragged.</p>
1120    </div>
1121    <div class="event-examples">
1122      <h4>Code examples</h4>
1123      <dl class="event-examples-list">
1124      
1125  <dt>
1126    Supply a callback function to handle the <code>dragStop</code> event as an init option.
1127  </dt>
1128  <dd>
1129  <pre><code>$('.selector').dialog({
1130     dragStop: function(event, ui) { ... }
1131  });</code></pre>
1132  </dd>
1133  
1134      
1135  <dt>
1136    Bind to the <code>dragStop</code> event by type: <code>dragStop</code>.
1137  </dt>
1138  <dd>
1139  <pre><code>$('.selector').bind('dragStop', function(event, ui) {
1140    ...
1141  });</code></pre>
1142  </dd>
1143  
1144      </dl>
1145    </div>
1146  </li>
1147  
1148  
1149  <li class="event" id="event-resizeStart">
1150    <div class="event-header">
1151      <h3 class="event-name"><a href="#event-resizeStart">resizeStart</a></h3>
1152      <dl>
1153        <dt class="event-type-label">Type:</dt>
1154          <dd class="event-type">resizeStart</dd>
1155      </dl>
1156    </div>
1157    <div class="event-description">
1158      <p>This event is triggered at the beginning of the dialog being resized.</p>
1159    </div>
1160    <div class="event-examples">
1161      <h4>Code examples</h4>
1162      <dl class="event-examples-list">
1163      
1164  <dt>
1165    Supply a callback function to handle the <code>resizeStart</code> event as an init option.
1166  </dt>
1167  <dd>
1168  <pre><code>$('.selector').dialog({
1169     resizeStart: function(event, ui) { ... }
1170  });</code></pre>
1171  </dd>
1172  
1173      
1174  <dt>
1175    Bind to the <code>resizeStart</code> event by type: <code>resizeStart</code>.
1176  </dt>
1177  <dd>
1178  <pre><code>$('.selector').bind('resizeStart', function(event, ui) {
1179    ...
1180  });</code></pre>
1181  </dd>
1182  
1183      </dl>
1184    </div>
1185  </li>
1186  
1187  
1188  <li class="event" id="event-resize">
1189    <div class="event-header">
1190      <h3 class="event-name"><a href="#event-resize">resize</a></h3>
1191      <dl>
1192        <dt class="event-type-label">Type:</dt>
1193          <dd class="event-type">resize</dd>
1194      </dl>
1195    </div>
1196    <div class="event-description">
1197      <p>This event is triggered when the dialog is resized.</p>
1198    </div>
1199    <div class="event-examples">
1200      <h4>Code examples</h4>
1201      <dl class="event-examples-list">
1202      
1203  <dt>
1204    Supply a callback function to handle the <code>resize</code> event as an init option.
1205  </dt>
1206  <dd>
1207  <pre><code>$('.selector').dialog({
1208     resize: function(event, ui) { ... }
1209  });</code></pre>
1210  </dd>
1211  
1212      
1213  <dt>
1214    Bind to the <code>resize</code> event by type: <code>resize</code>.
1215  </dt>
1216  <dd>
1217  <pre><code>$('.selector').bind('resize', function(event, ui) {
1218    ...
1219  });</code></pre>
1220  </dd>
1221  
1222      </dl>
1223    </div>
1224  </li>
1225  
1226  
1227  <li class="event" id="event-resizeStop">
1228    <div class="event-header">
1229      <h3 class="event-name"><a href="#event-resizeStop">resizeStop</a></h3>
1230      <dl>
1231        <dt class="event-type-label">Type:</dt>
1232          <dd class="event-type">resizeStop</dd>
1233      </dl>
1234    </div>
1235    <div class="event-description">
1236      <p>This event is triggered after the dialog has been resized.</p>
1237    </div>
1238    <div class="event-examples">
1239      <h4>Code examples</h4>
1240      <dl class="event-examples-list">
1241      
1242  <dt>
1243    Supply a callback function to handle the <code>resizeStop</code> event as an init option.
1244  </dt>
1245  <dd>
1246  <pre><code>$('.selector').dialog({
1247     resizeStop: function(event, ui) { ... }
1248  });</code></pre>
1249  </dd>
1250  
1251      
1252  <dt>
1253    Bind to the <code>resizeStop</code> event by type: <code>resizeStop</code>.
1254  </dt>
1255  <dd>
1256  <pre><code>$('.selector').bind('resizeStop', function(event, ui) {
1257    ...
1258  });</code></pre>
1259  </dd>
1260  
1261      </dl>
1262    </div>
1263  </li>
1264  
1265  
1266  <li class="event" id="event-close">
1267    <div class="event-header">
1268      <h3 class="event-name"><a href="#event-close">close</a></h3>
1269      <dl>
1270        <dt class="event-type-label">Type:</dt>
1271          <dd class="event-type">dialogclose</dd>
1272      </dl>
1273    </div>
1274    <div class="event-description">
1275      <p>This event is triggered when the dialog is closed.</p>
1276    </div>
1277    <div class="event-examples">
1278      <h4>Code examples</h4>
1279      <dl class="event-examples-list">
1280      
1281  <dt>
1282    Supply a callback function to handle the <code>close</code> event as an init option.
1283  </dt>
1284  <dd>
1285  <pre><code>$('.selector').dialog({
1286     close: function(event, ui) { ... }
1287  });</code></pre>
1288  </dd>
1289  
1290      
1291  <dt>
1292    Bind to the <code>close</code> event by type: <code>dialogclose</code>.
1293  </dt>
1294  <dd>
1295  <pre><code>$('.selector').bind('dialogclose', function(event, ui) {
1296    ...
1297  });</code></pre>
1298  </dd>
1299  
1300      </dl>
1301    </div>
1302  </li>
1303  
1304      </ul>
1305    </div>
1306    <div id="methods">
1307      <h2 class="top-header">Methods</h2>
1308      <ul class="methods-list">
1309        
1310  <li class="method" id="method-destroy">
1311    <div class="method-header">
1312      <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
1313      <dl>
1314        <dt class="method-signature-label">Signature:</dt>
1315          <dd class="method-signature">.dialog( 'destroy'
1316  
1317  
1318  
1319  
1320  
1321  
1322  
1323  )</dd>
1324      </dl>
1325    </div>
1326    <div class="method-description">
1327      <p>Remove the dialog functionality completely. This will return the element back to its pre-init state.</p>
1328    </div>
1329  </li>
1330  
1331  
1332  <li class="method" id="method-disable">
1333    <div class="method-header">
1334      <h3 class="method-name"><a href="#method-disable">disable</a></h3>
1335      <dl>
1336        <dt class="method-signature-label">Signature:</dt>
1337          <dd class="method-signature">.dialog( 'disable'
1338  
1339  
1340  
1341  
1342  
1343  
1344  
1345  )</dd>
1346      </dl>
1347    </div>
1348    <div class="method-description">
1349      <p>Disable the dialog.</p>
1350    </div>
1351  </li>
1352  
1353  
1354  <li class="method" id="method-enable">
1355    <div class="method-header">
1356      <h3 class="method-name"><a href="#method-enable">enable</a></h3>
1357      <dl>
1358        <dt class="method-signature-label">Signature:</dt>
1359          <dd class="method-signature">.dialog( 'enable'
1360  
1361  
1362  
1363  
1364  
1365  
1366  
1367  )</dd>
1368      </dl>
1369    </div>
1370    <div class="method-description">
1371      <p>Enable the dialog.</p>
1372    </div>
1373  </li>
1374  
1375  
1376  <li class="method" id="method-option">
1377    <div class="method-header">
1378      <h3 class="method-name"><a href="#method-option">option</a></h3>
1379      <dl>
1380        <dt class="method-signature-label">Signature:</dt>
1381          <dd class="method-signature">.dialog( 'option'
1382  
1383  , optionName
1384  
1385  , <span class="optional">[</span>value<span class="optional">] </span>
1386  
1387  
1388  
1389  )</dd>
1390      </dl>
1391    </div>
1392    <div class="method-description">
1393      <p>Get or set any dialog option. If no value is specified, will act as a getter.</p>
1394    </div>
1395  </li>
1396  
1397  
1398  <li class="method" id="method-close">
1399    <div class="method-header">
1400      <h3 class="method-name"><a href="#method-close">close</a></h3>
1401      <dl>
1402        <dt class="method-signature-label">Signature:</dt>
1403          <dd class="method-signature">.dialog( 'close'
1404  
1405  
1406  
1407  
1408  
1409  
1410  
1411  )</dd>
1412      </dl>
1413    </div>
1414    <div class="method-description">
1415      <p>Close the dialog.</p>
1416    </div>
1417  </li>
1418  
1419  
1420  <li class="method" id="method-isOpen">
1421    <div class="method-header">
1422      <h3 class="method-name"><a href="#method-isOpen">isOpen</a></h3>
1423      <dl>
1424        <dt class="method-signature-label">Signature:</dt>
1425          <dd class="method-signature">.dialog( 'isOpen'
1426  
1427  
1428  
1429  
1430  
1431  
1432  
1433  )</dd>
1434      </dl>
1435    </div>
1436    <div class="method-description">
1437      <p>Returns true if the dialog is currently open.</p>
1438    </div>
1439  </li>
1440  
1441  
1442  <li class="method" id="method-moveToTop">
1443    <div class="method-header">
1444      <h3 class="method-name"><a href="#method-moveToTop">moveToTop</a></h3>
1445      <dl>
1446        <dt class="method-signature-label">Signature:</dt>
1447          <dd class="method-signature">.dialog( 'moveToTop'
1448  
1449  
1450  
1451  
1452  
1453  
1454  
1455  )</dd>
1456      </dl>
1457    </div>
1458    <div class="method-description">
1459      <p>Move the dialog to the top of the dialogs stack.</p>
1460    </div>
1461  </li>
1462  
1463  
1464  <li class="method" id="method-open">
1465    <div class="method-header">
1466      <h3 class="method-name"><a href="#method-open">open</a></h3>
1467      <dl>
1468        <dt class="method-signature-label">Signature:</dt>
1469          <dd class="method-signature">.dialog( 'open'
1470  
1471  
1472  
1473  
1474  
1475  
1476  
1477  )</dd>
1478      </dl>
1479    </div>
1480    <div class="method-description">
1481      <p>Open the dialog.</p>
1482    </div>
1483  </li>
1484  
1485      </ul>
1486    </div>
1487    <div id="theming">
1488      <h2 class="top-header">Theming</h2>
1489      <p>The jQuery UI Dialog plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
1490  </p>
1491    <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the ui.dialog.css stylesheet that can be modified. These classes are highlighed in bold below.
1492  </p>
1493      
1494    <h3>Sample markup with jQuery UI CSS Framework classes</h3>
1495    &lt;div class=&quot;<strong>ui-dialog</strong> ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable&quot;&gt;<br />
1496  &nbsp;&nbsp;&nbsp;&lt;div class=&quot;<strong>ui-dialog-titlebar</strong> ui-widget-header ui-corner-all ui-helper-clearfix&quot;&gt;<br />
1497  &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 />
1498  &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 />
1499  &nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
1500  &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 />
1501  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Dialog content goes here.&lt;/p&gt;<br />
1502  &nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
1503  &lt;/div&gt;<br />
1504    <p class="theme-note">
1505      <strong>
1506        Note: This is a sample of markup generated by the dialog plugin, not markup you should use to create a dialog. The only markup needed for that is &lt;div&gt;&lt;/div&gt;.
1507      </strong>
1508    </p>
1509  
1510    </div>
1511  </div>
1512  
1513  </p><!-- 
1514  Pre-expand include size: 58797 bytes
1515  Post-expand include size: 100188 bytes
1516  Template argument size: 56839 bytes
1517  Maximum: 2097152 bytes
1518  -->
1519  
1520  <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3347-1!1!0!!en!2 and timestamp 20090604112219 -->