jQuery UI API - Dialog Widget

Usage

Description: Opens content in an interactive overlay.

Version Added: 1.0

A dialog is a floating window that includes a title bar and a content area. The dialog window can be moved, resized, and closed with the 'x' icon by default.

If the content length exceeds the maximum height, a scrollbar will automatically appear.

A bottom button bar and a semi-transparent modal overlay are common additions.

Focus

When a dialog is opened, focus is automatically moved to the first item that meets the following conditions:

The first element inside the dialog with the autofocus attribute
The first :tabbable element within the dialog content
The first :tabbable element within the dialog button pane
The dialog's close button
The dialog itself

When opened, the Dialog Widget ensures that focus is cycled between elements within the dialog when tabbing, excluding elements outside the dialog. Modal dialogs prevent mouse users from clicking on elements outside the dialog.

When the dialog is closed, focus automatically returns to the element that had focus when the dialog was opened.

Hiding the Close Button

In some cases, you might want to hide the close button, for example, when a close button is already present in the button pane. The best approach is to use CSS. For instance, you can define a simple rule like:

.no-close .ui-dialog-titlebar-close {
  display: none;
}

Then, you can add the no-close class to any dialog to hide the close button:

$( "#dialog" ).dialog({
  dialogClass: "no-close",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Theming

The Dialog Widget uses the jQuery UI CSS Framework to define its visual styling. If you need to use specific styles for the dialog, you can use the following CSS class names:

ui-dialog: The outer container of the dialog.
ui-dialog-titlebar: The title bar containing the dialog title and the close button.
ui-dialog-title: The container around the dialog text title.
ui-dialog-titlebar-close: The close button of the dialog.
ui-dialog-content: The container around the dialog content. This is also the element where the widget is instantiated.
ui-dialog-buttonpane: The panel containing the dialog buttons. Only rendered when the buttons option is set.
ui-dialog-buttonset: The container around the buttons.

Additionally, when the modal option is set, an element with the ui-widget-overlay class name is appended to the <body>.

Dependencies

UI Core
Widget Factory
Position
Button Widget
Draggable Widget (optional; when used with the draggable option)
Resizable Widget (optional; when used with the resizable option)
Effects Core (optional; when used with the show and hide options)

Additional Notes

This widget requires some functional CSS to work. If you create a custom theme, use the widget-specific CSS file as a starting point. A Simple jQuery UI Dialog.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dialog Widget Demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>

<button id="opener">Open Dialog</button>
<div id="dialog" title="Dialog Title">I am a dialog</div>

<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
</script>

</body>
</html>

View Demo

❮ Example Selectable Api Fade Effect ❯