news 2026/4/29 10:26:07

jQuery EasyUI 窗口 - 创建对话框

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
jQuery EasyUI 窗口 - 创建对话框

下面直接给你最实用、最常见的创建对话框(dialog)方法,jQuery EasyUI 的dialog组件其实就是window的子类,专门为对话框场景优化了默认样式和行为(默认带底部按钮栏、自动居中、模态等),复制粘贴就能弹出超级专业的确认框、表单框、详情框,领导最爱的“标准弹窗对话框”全都有!

方法1:最简单最常用 - 基本对话框(推荐现在就用这个,3秒出效果)

<!-- 定义一个对话框 --><divid="dlg"class="easyui-dialog"title="用户登录"style="width:400px;height:300px;padding:20px;"data-options="iconCls:'icon-login', modal:true, <!-- 模态遮罩 --> closed:true, <!-- 默认关闭 --> buttons:'#dlg-buttons'<!-- 指定底部按钮栏 -->"><formid="loginForm"method="post"><divstyle="margin-bottom:20px;"><inputclass="easyui-textbox"name="username"style="width:100%;"data-options="label:'用户名:',required:true,iconCls:'icon-man'"></div><divstyle="margin-bottom:20px;"><inputclass="easyui-passwordbox"name="password"style="width:100%;"data-options="label:'密码:',required:true"></div><divstyle="margin-bottom:20px;"><inputclass="easyui-checkbox"name="remember"label="记住登录状态"></div></form></div><!-- 底部按钮栏 --><divid="dlg-buttons"><ahref="javascript:void(0)"class="easyui-linkbutton c6"iconCls="icon-ok"onclick="submitLogin()">登录</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-cancel"onclick="$('#dlg').dialog('close')">取消</a></div><!-- 触发打开对话框的按钮 --><divstyle="padding:20px;"><ahref="javascript:void(0)"class="easyui-linkbutton c8"iconCls="icon-login"onclick="$('#dlg').dialog('open')">打开登录对话框</a></div><script>functionsubmitLogin(){if($('#loginForm').form('validate')){$.messager.progress();// 显示进度条// 模拟登录setTimeout(function(){$.messager.progress('close');$.messager.alert('成功','登录成功!欢迎回来','info');$('#dlg').dialog('close');},1000);}}</script>

效果:标准登录对话框,带表单验证、底部“登录/取消”按钮、自动居中、模态遮罩,超级专业!

方法2:JS动态创建对话框(更灵活,适合通用弹窗)

functionopenCommonDialog(title,content,width,height){$('<div id="commonDlg"/>').appendTo('body').dialog({title:title,width:width||500,height:height||400,modal:true,closed:false,content:content,// 可以直接写HTML字符串buttons:[{text:'确定',iconCls:'icon-ok',handler:function(){alert('确定操作');$('#commonDlg').dialog('close');}},{text:'取消',handler:function(){$('#commonDlg').dialog('close');}}],onClose:function(){$(this).dialog('destroy');// 关闭后销毁}});}// 调用示例functionshowInfo(){openCommonDialog('系统提示','<div style="padding:20px;font-size:16px;">这是一个动态创建的对话框!</div>',400,200);}

方法3:远程加载内容的对话框(超级常用!编辑/新增表单)

<divid="editDlg"class="easyui-dialog"title="编辑用户"style="width:600px;height:500px;"data-options="modal:true, closed:true, buttons:[{ text:'保存', iconCls:'icon-save', handler:function(){ if($('#editForm').form('validate')){ alert('保存成功!'); $('#editDlg').dialog('close'); } } },{ text:'取消', handler:function(){ $('#editDlg').dialog('close'); } }]"><!-- 内容通过href远程加载 --></div><script>functionopenEdit(id){$('#editDlg').dialog({title:id?'编辑用户':'新增用户',href:'edit_user.php?id='+(id||'')// 加载远程表单页面}).dialog('open').dialog('center');}</script><!-- 调用 --><ahref="javascript:void(0)"class="easyui-linkbutton"onclick="openEdit(123)">编辑用户</a><ahref="javascript:void(0)"class="easyui-linkbutton c6"onclick="openEdit()">新增用户</a>

方法4:常用配置汇总(复制这些就能做出各种专业对话框)

$('#dlg').dialog({title:'确认删除',width:400,height:200,closed:false,cache:false,modal:true,resizable:false,shadow:true,inline:false,// false=绝对定位(可拖出浏览器),true=页面内draggable:true,closable:true,// 显示右上角关闭按钮toolbar:'#dlg-toolbar',// 可加顶部工具栏buttons:'#dlg-buttons'// 底部按钮});

你现在直接复制方法1的完整代码到你的页面,刷新一下就能看到一个完美的 EasyUI 对话框了!
dialogwindow更适合做表单、确认、提示类弹窗,因为默认样式和按钮更标准。

想要我给你一个完整的HTML示例(带表单验证 + 远程加载 + 工具栏 + 动态创建)?
或者你告诉我你想做什么对话框(比如“确认删除”“批量操作确认”“复杂表单”“消息提示框”),我2分钟发你精准代码,复制就能跑!

快说说你的具体需求,我手把手帮你搞定,5分钟内看到超级专业的对话框效果!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/20 2:43:52

从0到1:快马平台构建电商SaaS实战案例

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个多商户电商SaaS系统&#xff0c;包含&#xff1a;1. 商户入驻与管理后台 2. 商品SPU/SKU管理系统 3. 购物车与订单流程 4. 微信/支付宝支付对接 5. 基础数据统计看板。要求…

作者头像 李华
网站建设 2026/4/18 5:33:04

节省3小时!快速解决dpkg依赖问题的5个技巧

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个效率工具包&#xff0c;包含&#xff1a;1) 依赖关系快速检查脚本 2) 自动修复常见dpkg错误的工具 3) 软件源优化建议生成器 4) 安装历史分析功能。要求针对sunloginclient…

作者头像 李华
网站建设 2026/4/18 8:50:11

如何用AI自动生成Android权限管理代码?

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 使用Kimi-K2模型生成一个Android应用的动态权限管理模块代码。需要包含以下功能&#xff1a;1. 检查并请求READ_EXTERNAL_STORAGE和CAMERA权限 2. 处理用户授权和拒绝场景 3. 显示合…

作者头像 李华
网站建设 2026/4/29 2:35:50

天津有哪些正规店铺设计公司?这5家值得关注

天津有哪些正规店铺设计公司&#xff1f;这5家值得关注在天津这个商业繁荣的城市&#xff0c;店铺设计对于商家的重要性不言而喻。一个好的店铺设计不仅能提升品牌形象&#xff0c;还能吸引更多的顾客。那么天津有哪些正规的店铺设计公司呢&#xff1f;下面这5家值得大家关注。…

作者头像 李华
网站建设 2026/4/26 12:32:35

2025年AI赋能央企数智化转型研究报告|附42页PDF文件下载

本报告聚焦央企AI数智化转型全链路实践&#xff0c;是一份兼具指导性与实操性的实战指南&#xff0c;深度剖析转型政策导向、市场规模及行业发展趋势&#xff0c;全面梳理AI技术应用的发展阶段、行业分布与核心场景落地进展&#xff0c;精准拆解技术自主、数据协同、组织协同等…

作者头像 李华
网站建设 2026/4/26 8:01:46

JMeter效率提升:10个必知的高级技巧

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 生成一个JMeter测试脚本&#xff0c;展示以下高级技巧&#xff1a;1. 使用CSV数据文件进行参数化&#xff1b;2. 配置分布式测试&#xff1b;3. 使用BeanShell后置处理器处理响应数…

作者头像 李华