jQuery UI Dialog（对话框）实例
Dialog是 jQuery UI 中最常用的组件之一，用于创建模态或非模态弹出窗口，常用于确认提示、表单编辑、内容预览、登录框、提示消息等。它支持拖拽、缩放、按钮、动画、自动居中等功能。
官方演示地址：https://jqueryui.com/dialog/
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1.基础模态对话框
点击按钮打开模态窗口（遮罩背景，阻止页面交互）。
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI Dialog 基础示例</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-3.6.0.min.js"></script><scriptsrc="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script></head><body><buttonid="openDialog">打开对话框</button><divid="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.带按钮的对话框（确认/取消）
自定义底部按钮，支持图标和回调。
<divid="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支持缩放。
<divid="advancedDialog"title="高级对话框"><p>这个对话框支持拖拽、缩放、动画、自动居中。</p><imgsrc="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 加载内容、或无标题栏自定义样式的完整示例，请告诉我更多细节！
