link- - # A jQuery object. true or false. A simple Javascript object.. A string of characters. A valid numeric. A string of characters or a number. The Javascript object representation of a DOM Element. One or more DOM Elements (a single one or an array). A Javascript object that contains key/value pairs in the form of properties and values. An Array of DOM Elements. An Array of strings. A reference to a Javascript function. An XMLHttpRequest object (referencing a HTTP request). A jQuery object. true or false. A simple Javascript object.. A string of characters. A valid numeric. A string of characters or a number. The Javascript object representation of a DOM Element. One or more DOM Elements (a single one or an array). A Javascript object that contains key/value pairs in the form of properties and values. An Array of DOM Elements. An Array of strings. A reference to a Javascript function. An XMLHttpRequest object (referencing a HTTP request).

Default:

Property options

Show details | Hide details

Event options

Show details | Hide details

A brief description of methods and their uses goes here so their use is clearly explained and any caveats can be mentioned up front.

Methods

Show details | Hide details

( , )

Returns:

Arguments:

Code sample:

ui.dialog uses the jQuery UI CSS styles framework for all major components, e.g. for the titlebar, the resize handle, etc., some of which are borrowed from ui.resizable.

Sample code with CSS classes

Use the classes highlighted in bold to customize the dialog:

<div class="ui-dialog" role="dialog" aria-labelledby="ui-dialog-title-1">
  <div class="ui-dialog-titlebar">
    <span class="ui-dialog-title" id="ui-dialog-title-1">Dialog Title</span>
    <a href="#" class="ui-dialog-titlebar-close" role="button" title="Close">
    <span class="ui-icon ui-icon-closethick">Close</span></a>
  </div>
  <div class="ui-dialog-content" style="height: 13em;">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
  </div>
  <div class="ui-dialog-buttonpane">
    <button class="ui-state-default ui-priority-primary ui-corner-all">Primary</button>
    <button class="ui-state-default ui-priority-secondary ui-corner-all">Secondary</button>
    <button class="ui-state-default ui-state-disabled ui-corner-all">Disabled</button>
  </div>
  <div class="ui-resizable-n ui-resizable-handle"></div>
  <div class="ui-resizable-s ui-resizable-handle"></div>
  <div class="ui-resizable-e ui-resizable-handle"></div>
  <div class="ui-resizable-w ui-resizable-handle"></div>
  <div class="ui-resizable-ne ui-resizable-handle"></div>
  <div class="ui-resizable-se ui-resizable-handle ui-icon ui-icon-grip-diagonal-se"></div>
  <div class="ui-resizable-sw ui-resizable-handle"></div>
  <div class="ui-resizable-nw ui-resizable-handle"></div>
</div>

See also