当前位置：首页 > news >正文

jQuery UI 实例 - 对话框（Dialog）

news 2026/6/27 20:17:12

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>