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

jQuery EasyUI 窗口 - 创建对话框

news 2026/8/12 8:53:27

下面直接给你最实用、最常见的创建对话框（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'// 底部按钮});