YouTip

# jQuery UI API - Dialog Widget ## Category (#) ## Usage **Description:** Opens content in an interactive overlay. **Added in version:** 1.0 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. If the content length exceeds the maximum height, a scrollbar appears automatically. 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 matches the following conditions: 1. The first element within the dialog with the `autofocus` attribute 2. The first [`:tabbable`](#) element within the dialog content 3. The first [`:tabbable`](#) element within the dialog button pane 4. The dialog's close button 5. The dialog itself When opened, the dialog widget ensures that tabbing cycles through the dialog's contents, excluding elements outside the dialog. Modal dialogs prevent mouse users from clicking outside the dialog. When the dialog is closed, focus is automatically returned to the element that had focus before the dialog was opened. ### Hiding the 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 via CSS. As an example, 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 (#) to style its look and feel. To style dialog-specific elements, you can use the following CSS class names: * `ui-dialog`: The outer container for the dialog. * `ui-dialog-titlebar`: The title bar containing the dialog title and close button. * `ui-dialog-title`: The container around the dialog's 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 that the widget is instantiated on. * `ui-dialog-buttonpane`: The pane 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 ``. ### Dependencies (optional; used with the [`draggable`](#) option) (optional; used with the [`resizable`](#) option) (optional; used with the [`show`](#) and [`hide`](#) options) ### Additional Notes * This widget requires some functional CSS, otherwise it won't work. If you are creating a custom theme, use the widget-specific CSS file as a starting point. ## Examples A simple jQuery UI Dialog. Open Dialog $( "#dialog" ).dialog({ autoOpen: false }); $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" );}); (#) [](#)[jQuery UI API – Datepicker Widget](#) [jQuery UI API – Menu Widget](#)[](#) [Volcengine Coding Plan supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax, officially supplied, stable and reliable. Configuration Guide ¥9.9/month Subscribe Now](https://maas.xfyun.cn/modelSquare?ch=maas_lm_l2E) ### Share Notes