Latest web development tutorials

jQuery UI API - dialog component (Dialog Widget)

category

Widgets (Widgets)

usage

Description: Open content in an interactive overlay.

New Version: 1.0

Dialog is a floating window that includes a title bar and a content area. Dialog window can be moved, resized, default by 'x' icon to close.

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

A bottom button bar, and a semi-transparent overlay mode is common to add options.

focus

When you open a dialog box, the focus will automatically move to meet the criteria below the first item:

  1. With autofocus first element within the properties dialog
  2. The first dialog box contents within :tabbable element
  3. The first panel within the dialog button :tabbable element
  4. Dialog box, the Close button
  5. The dialog box itself

When open, the dialog components (Dialog Widget) ensure the boxes to switch focus between elements by tab, the dialog box does not include the elements outside. Modal dialog prevents the user clicks the mouse elements outside the dialog box.

When closing the dialog, the focus automatically returns to the previous dialog box opens on the element focus.

Hide close button

In some cases, you might want to hide the close button, for example, a button panel has a button to close the case. The best solution is through CSS. As an example, you can define a simple rule, such as: 

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

Then, you can add no-close , class to arbitrary dialog box, used to hide the close button: 

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

Theming

Dialog components (Dialog Widget) using jQuery UI CSS framework to define the look and feel of its style. If you need to use the dialog box to specify the style, you can use the following CSS class name:

  • ui-dialog : dialog outer container.
    • ui-dialog-titlebar : dialog box contains the title and close button of the title bar.
      • ui-dialog-title : Dialog title text around the container.
      • ui-dialog-titlebar-close : the button to close the dialog box.
    • ui-dialog-content : dialog content around the container. This is also part of the element is instantiated.
    • ui-dialog-buttonpane : contains dialog button panel. Only when the set buttons when choices are presented.
      • ui-dialog-buttonset : buttons around the container.

In addition, when set modal time options, with a ui-widget-overlay element class name is appended to the <body> .

rely

Additional information

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

Examples

A simple jQuery UI Dialog (Dialog). 

<! Doctype html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> dialog components (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>