首先，确保你已经包含了 jQuery 和 jQuery UI 的库。你可以在头部添加如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dialog Example</title>
<!-- 引入 jQuery 和 jQuery UI 的库 -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<!-- 创建一个按钮，点击时显示对话框 -->
<button id="showDialogBtn">显示对话框</button>
<!-- 创建一个隐藏的对话框 -->
<div id="dialog" title="基本对话框">
<p>这是一个简单的对话框，可以包含文本、表单、按钮等。</p>
</div>
<script>
// 使用 jQuery UI 的对话框
$(function() {
// 初始化对话框，但保持其隐藏
$("#dialog").dialog({
autoOpen: false,
modal: true, // 设为 true 表示模态对话框
});
// 当按钮被点击时显示对话框
$("#showDialogBtn").on("click", function() {
$("#dialog").dialog("open");
});
});
</script>
</body>
</html>
在这个例子中，我们创建了一个按钮（id 为 "showDialogBtn"），并在页面上创建了一个隐藏的对话框（id 为 "dialog"）。通过 $("#dialog").dialog({/* options */}); 初始化对话框，其中 autoOpen: false 表示初始时对话框是隐藏的，而 modal: true 表示对话框是模态的。
当按钮被点击时，通过 $("#dialog").dialog("open"); 打开对话框。对话框将以模态的方式显示在页面上。你可以根据需求添加更多的选项和自定义对话框的外观和行为。
转载请注明出处：http://www.pingtaimeng.com/article/detail/13065/jQuery UI