📅 最后修改于: 2023-12-03 15:08:21.618000 🧑 作者: Mango
jQuery UI 是一个基于 jQuery 的用户界面框架，其提供了很多常用的 UI 组件，包括对话框（Dialog）组件。通过 jQuery UI，我们可以轻松地创建和定制对话框，以便在网页中显示信息、收集用户输入等。
本篇文章将介绍如何使用 jQuery UI 制作基本对话框，并提供相应的代码示例供参考。
在开始之前，需要确保已经引入了 jQuery 和 jQuery UI 的相关资源。可以在 HTML 文件中添加以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本对话框</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<!-- 对话框内容将在此处显示 -->
</body>
</html>
以上代码中，我们引入了 jQuery 和 jQuery UI 的相关资源，并设置了一个空的 HTML 元素用于显示对话框内容。
接下来，我们将创建一个基本的对话框。在 JavaScript 文件中添加以下代码：
$(function() {
// 创建对话框
$("#dialog").dialog({
autoOpen: false, // 默认不显示
modal: true, // 模态对话框
buttons: {
"确定": function() {
$(this).dialog("close");
},
"取消": function() {
$(this).dialog("close");
}
}
});
// 点击按钮显示对话框
$("#show-dialog").click(function() {
$("#dialog").dialog("open");
});
});
以上代码中，我们创建了一个 ID 为 dialog 的对话框，并设置了自动打开为 false（即默认不显示）、模态对话框和“确定”、“取消”两个按钮。并且通过 $("#show-dialog").click() 函数，我们设定了点击 ID 为 show-dialog 的按钮后，弹出对话框。
在 HTML 文件中添加以下代码：
<button id="show-dialog">显示对话框</button>
<!-- 对话框内容 -->
<div id="dialog" title="基本对话框">
<p>这是一个基本对话框。</p>
</div>
以上代码中，我们创建了一个 ID 为 show-dialog 的按钮，并在其下方创建了一个用于显示对话框内容的 DIV 元素，并设置了对话框标题为“基本对话框”、显示内容为“这是一个基本对话框”。
最后，运行 HTML 文件，点击按钮即可弹出基本对话框。
代码示例已上传至 Github。
通过 jQuery UI 的帮助，我们可以很容易地创建基本的对话框，并且可以通过调整参数和样式，使对话框更适应我们的需求。在实际开发过程中，我们可以根据不同的需求，灵活使用 jQuery UI 的各种组件，为用户提供更好的交互体验。