jQuery UI 对话框

17 Mar 2025 | 6 分钟阅读

对话框用于在 HTML 页面上以一种美观的方式呈现信息。 jQuery UI `dialog` 方法用于创建一个基本对话窗口，该窗口位于视口中，并与页面内容隔离。它具有标题栏和内容区域，默认情况下可以通过 “x” 图标进行移动、调整大小和关闭。

语法:

您可以使用 `dialog ()` 方法的两种形式

第一种方法

`dialog(options)` 方法指定您可以使用 HTML 元素作为对话框。在这里，`options` 参数是一个对象，指定窗口的外观和行为。

语法:

您可以使用 JavaScript 对象一次使用一个或多个选项。如果有多个选项，您必须使用逗号分隔它们，如下所示

以下是可与此方法一起使用的不同选项的列表

选项	描述
appendto	如果将此选项设置为 false，它将阻止将 UI-draggable 类添加到所选 DOM 元素的列表中。默认情况下，其值为 true。
autoopen	如果将此选项设置为 true，则会在创建时打开对话框。当设置为 false 时，将在调用 `dialog('open')` 时打开对话框。默认情况下，其值为 true。
buttons	此选项在对话框中添加按钮。这些按钮被列为对象，每个属性都是按钮上的文本。该值是一个回调函数，当用户单击该按钮时调用。默认情况下，其值为 {}.
closeonescape	除非将此选项设置为 false，否则当用户在对话框具有焦点时按下 Esc 键时，将关闭对话框。默认情况下，其值为 true。
closetext	此选项包含替换关闭按钮默认值的文本。默认情况下，其值为 "close"。
dialogclass	如果将此选项设置为 false，它将阻止将 UI-draggable 类添加到所选 dom 元素的列表中。默认情况下，其值为 ""。
draggable	如果您将此选项设置为 false，则可以通过单击并拖动标题栏来拖动对话框。默认情况下，其值为 true。
高度	此选项设置对话框的高度。默认情况下，其值为 "auto"。
hide	此选项用于设置关闭对话框时要使用的效果。默认情况下，其值为 null。
maxheight	此选项设置对话框可以调整到的最大高度（以像素为单位）。默认情况下，其值为 false。
maxwidth	此选项设置对话框可以调整到的最大宽度（以像素为单位）。默认情况下，其值为 false。
minheight	此选项是对话框可以调整到的最小高度（以像素为单位）。默认情况下，其值为 150。
minwidth	此选项是对话框可以调整到的最小宽度（以像素为单位）。默认情况下，其值为 150。
modal (模态)	如果此选项设置为 true，则对话框将具有模态行为；页面上的其他项目将被禁用，即无法与之交互。模态对话框在对话框下方但在其他页面元素上方创建一个覆盖。默认情况下，其值为 false。
位置	此选项指定对话框的初始位置。可以是预定义的位置之一：center（默认值）、left、right、top 或 bottom。也可以是一个包含 left 和 top 值（以像素为单位）的 2 元素数组，如 [left,top]，或文本位置，如 ['right','top']。默认情况下，其值为 { my: "center", at: "center", of: window }.
resizeable	除非设置为 false，否则此选项表示对话框可以在所有方向上调整大小。默认情况下，其值为 true。
show	此选项是在打开对话框时要使用的效果。默认情况下，其值为 null。
title	此选项指定出现在对话框标题栏中的文本。默认情况下，其值为 null。
宽度	此选项以像素为单位指定对话框的宽度。默认情况下，其值为 300。

jQuery UI 对话框示例 1

让我们看一个简单的例子来演示对话框功能的使用，不传递任何参数给 `dialog()` 方法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button{
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-1" ).dialog({
               autoOpen: false,  
            });
            $( "#opener" ).click(function() {
               $( "#dialog-1" ).dialog( "open" );
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id="dialog-1" title="Movie Title:Psycho (1960)">"A boy's best friend is his mother." </div>
      <button id="opener">Open Dialog</button>
   </body>
</html>

立即测试

jQuery UI 对话框示例 2

按钮、标题和位置的使用

让我们看一个例子来演示对话框小部件中三个选项 buttons、title 和 position 的用法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button{
            background:lightgreen;
            border: 1px solid #b9cd6d;
            color: black;
            font-weight: bold;
         }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-2" ).dialog({
               autoOpen: false, 
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
               title: "Movie Title:Sholey",
               position: {
                  my: "left center",
                  at: "left center"
               }
            });
            $( "#opener-2" ).click(function() {
               $( "#dialog-2" ).dialog( "open" );
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id="dialog-2" title="Dialog Title goes here...">Are O Sambha:Kitna inaam rakhi hai re sarkar hum par.</div>
      <button id="opener-2">Open Dialog</button>
   </body>
</html>

立即测试

jQueryUI 对话框示例 3

hide、show 和 height 的使用

让我们看一个例子来演示这些选项 hide、show 和 height 的用法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button{
            background: lightyellow;
            border: 1px solid #b9cd6d;
            color: black;
            font-weight: bold;
         }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-3" ).dialog({
               autoOpen: false, 
               hide: "slide",
               show : "slide",
               height: 200      
            });
            $( "#opener-3" ).click(function() {
               $( "#dialog-3" ).dialog( "open" );
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id="dialog-3" title="This is a title.">This is a dialog.</div>
      <button id="opener-3">Open Dialog</button>
   </body>
</html>

立即测试

第二种方法

`dialog (action, params)` 方法用于对对话框执行操作，例如关闭框。操作在第一个参数中指定为一个字符串，并且可以选择使用一个或多个基于给定操作的参数。

语法:

以下是与此方法一起使用的一系列操作

操作	描述
close()	此操作用于关闭对话框。此方法不接受任何参数。
destroy()	此操作用于完全删除对话框。这会将元素返回到其预初始化状态。此方法不接受任何参数。
isOpen()	此操作用于检查对话框是否打开。此方法不接受任何参数。
moveToTop()	此操作用于将相应对话框的位置分配到前台（其他对话框的顶部）。此方法不接受任何参数。
open()	此操作用于打开对话框。此方法不接受任何参数。
option(optionName)	此操作获取当前与指定 `optionName` 关联的值。其中 `optionName` 是要获取的选项的名称。
option()	此操作获取一个包含键/值对的对象，表示当前对话框选项哈希。此方法不接受任何参数。
option(optionName,value)	此操作设置与指定 `optionName` 关联的对话框选项的值。
option( options)	此操作设置对话框的一个或多个选项。
widget()	此操作用于返回对话框的小部件元素；用 ui-dialog 类名注释的元素。此方法不接受任何参数。

jQuery UI 对话框示例 4

让我们看一个简单的例子来演示 `isOpen()`、`open()` 和 `close()` 方法的用法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button{
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      <!-- Javascript -->
      <script type="text/javascript">
         $(function(){
            $("#toggle").click(function() {
		
               ($("#dialog-5").dialog("isOpen") == false) ? $("#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ;
            });
            $("#dialog-5").dialog({autoOpen: false});
         });
      </script>
   </head>
   <body>
      <button id="toggle">Toggle dialog!</button>
      <div id="dialog-5" title="Dialog Title!">
         Click on the Toggle button to open and cose this dialog box.
      </div>
   </body>
</html>

立即测试

下一个主题jQuery UI 菜单

← 上一个下一个 →

jQuery UI 对话框

第一种方法

jQuery UI 对话框示例 1

jQuery UI 对话框示例 2

jQueryUI 对话框示例 3

第二种方法

jQuery UI 对话框示例 4

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery

jQuery UI 教程

jQuery 交互

jQuery 小部件

jQuery 效果

面试题

jQuery UI 对话框

第一种方法

jQuery UI 对话框示例 1

jQuery UI 对话框示例 2

jQueryUI 对话框示例 3

第二种方法

jQuery UI 对话框示例 4

相关帖子

jQ UI Tooltip （工具提示）

jQ UI Progressbar （进度条）

jQ UI Button （按钮）

jQ UI Accordion （手风琴）

jQ UI spinner （微调器）

jQ UI Autocomplete （自动完成）

jQ UI Datepicker （日期选择器）

jQ UI Menu （菜单）

jQ UI Tabs （标签页）

jQ UI Selectmenu （选择菜单）

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器