jQuery UI API - Dialog Widget

Category

Widgets

Usage

Description:Open content in an interactive overlay.

Added in version:1.0

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

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:

  1. withautofocusattribute
  2. The first within the dialog content:tabbableelement
  3. The first within the dialog button pane:tabbableelement
  4. The dialog's close button
  5. The dialog itself

When opened, the Dialog Widget ensures that focus is moved between elements within the dialog via the Tab key, excluding elements outside the dialog. Modal dialogs prevent mouse users from clicking elements outside the dialog.

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

Hide Close Button

In some cases, you may want to hide the close button, for example, when there is already a close button in the button pane. The best solution is through CSS. For instance, you can define a simple rule such as:

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

Then you can addno-closeclass 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 usesjQuery UI CSS Frameworkto define the styling of its appearance and feel. If you need to use dialog-specific styles, 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 close button.
      • ui-dialog-title: The container around the dialog text title.
      • ui-dialog-titlebar-close: The dialog's close button.
    • ui-dialog-content: The container around the dialog content. This is also the element on which the widget is instantiated.
    • ui-dialog-buttonpane: The panel containing the dialog buttons. This is only rendered when thebuttonsoption is set.
      • ui-dialog-buttonset: The container around the buttons.

Additionally, when themodaloption is set, an element with theui-widget-overlayclass name is appended to<body>。

Dependencies

Additional Notes

  • This widget requires some functional CSS, otherwise it will not work. If you create a custom theme, use the widget-specific CSS file as a starting point.

Examples

A simple jQuery UI Dialog.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>对话框部件（Dialog Widget）演示</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">打开对话框</button>
<div id="dialog" title="对话框标题">我是一个对话框</div>
 
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
</script>
 
</body>
</html>

Other Extensions