jQuery UI Dialog（对话框）实例
Dialog 是 jQuery UI 中最常用的组件之一，用于创建模态或非模态弹出窗口，常用于确认提示、表单编辑、内容预览、登录框、提示消息等。它支持拖拽、缩放、按钮、动画、自动居中等功能。
官方演示地址：https://jqueryui.com/dialog/
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1. 基础模态对话框
点击按钮打开模态窗口（遮罩背景，阻止页面交互）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog 基础示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<button id="openDialog">打开对话框</button>
<div id="dialog" title="基本对话框">
<p>这是一个模态对话框示例。你可以点击右上角关闭，或使用按钮关闭。</p>
</div>
<script>
$(function() {
$("#dialog").dialog({
autoOpen: false, // 默认不打开
modal: true, // 模态（背景遮罩）
width: 400, // 宽度
height: 300 // 高度
});
$("#openDialog").click(function() {
$("#dialog").dialog("open");
});
});
</script>
</body>
</html>2. 带按钮的对话框（确认/取消）
自定义底部按钮，支持图标和回调。
<div id="confirmDialog" title="确认删除？">
<p>此操作不可恢复，确定要删除吗？</p>
</div>
<script>
$("#confirmDialog").dialog({
autoOpen: false,
modal: true,
resizable: false,
buttons: {
"删除": function() {
alert("已删除！");
$(this).dialog("close");
},
"取消": function() {
$(this).dialog("close");
}
}
});
// 示例打开方式
// $("#confirmDialog").dialog("open");
</script>3. 可拖拽 + 可缩放 + 其他高级选项
默认支持拖拽标题栏移动，添加 resizable: true 支持缩放。
<div id="advancedDialog" title="高级对话框">
<p>这个对话框支持拖拽、缩放、动画、自动居中。</p>
<img src="https://via.placeholder.com/300x150" alt="示例图片">
</div>
<script>
$("#advancedDialog").dialog({
autoOpen: false,
modal: true,
width: 500,
height: 400,
resizable: true, // 可缩放
draggable: true, // 可拖拽（默认true）
position: { my: "center", at: "center", of: window }, // 居中
show: { effect: "fade", duration: 500 }, // 打开动画
hide: { effect: "explode", duration: 500 }, // 关闭动画
closeOnEscape: true // Esc键关闭
});
</script>4. 事件监听 + 动态内容
<script>
$("#dialog").dialog({
open: function() { console.log("对话框打开"); },
close: function() { console.log("对话框关闭"); },
resize: function(event, ui) { console.log("新尺寸: " + ui.size.width + "x" + ui.size.height); }
});
</script>小技巧：
- 想加载远程内容：使用
open: function() { $(this).load("remote.html"); } - 非模态：
modal: false - 全屏效果：
width: $(window).width() * 0.9, height: $(window).height() * 0.9 - 多个对话框：每个 div 单独初始化即可
Dialog 常用于表单验证、Ajax 提交前确认、图片查看器等。如果你需要 登录表单对话框、Ajax 加载内容、或 无标题栏自定义样式 的完整示例，请告诉我更多细节！
