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

jQuery EasyUI 窗口 - 创建简单窗口

news 2026/6/28 14:25:37

下面直接给你最实用、最常见的创建简单窗口（window）方法，jQuery EasyUI 的window组件超级简单好用，复制粘贴就能弹出专业对话框，领导最爱的“弹窗表单、确认框、详情查看”效果全都有！

方法1：最简单 - 3秒创建一个基本窗口（推荐现在就用这个）

<!-- 先定义一个隐藏的div作为窗口内容 --><divid="win"class="easyui-window"title="简单窗口示例"style="width:600px;height:400px;padding:10px;"data-options="iconCls:'icon-help', modal:true, <!-- 模态窗口（背景遮罩） --> closed:true, <!-- 默认关闭 --> minimizable:false, maximizable:false, collapsible:false, shadow:true"><h2>欢迎使用 EasyUI 窗口！</h2><p>这是一个最简单的窗口示例。</p><p>支持拖拽、关闭、模态遮罩等功能。</p><divstyle="margin-top:20px;text-align:center;"><ahref="javascript:void(0)"class="easyui-linkbutton"onclick="$('#win').window('close')">关闭窗口</a></div></div><!-- 按钮触发打开窗口 --><divstyle="padding:20px;"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-window"onclick="$('#win').window('open')">打开简单窗口</a></div>

效果：点击按钮弹出带标题、拖拽、关闭按钮、模态遮罩的窗口，超级专业！

方法2：JS动态创建窗口（更灵活，不需要预定义div）

<divstyle="padding:20px;"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-add"onclick="openDynamicWin()">动态创建窗口</a></div><script>functionopenDynamicWin(){$('<div id="dynamicWin"/>').appendTo('body').window({title:'动态创建的窗口',width:500,height:300,modal:true,shadow:true,closed:false,// 创建后立即打开content:'<div style="padding:20px;text-align:center;"><h3>这是通过JS动态创建的窗口</h3><p>内容可以是任意HTML</p></div>',onClose:function(){$(this).window('destroy');// 关闭时销毁，避免内存占用},footer:'#win-footer'// 可指定底部按钮区});}</script><!-- 可选：自定义底部按钮 --><divid="win-footer"style="text-align:right;padding:5px;"><ahref="javascript:void(0)"class="easyui-linkbutton"onclick="$('#dynamicWin').window('close')">取消</a><ahref="javascript:void(0)"class="easyui-linkbutton c6"onclick="alert('保存成功！');$('#dynamicWin').window('close')">确定</a></div>

方法3：常见实用配置（复制这些选项就能做出领导喜欢的弹窗）

$('#win').window({title:'用户编辑',width:700,height:500,top:50,// 距离顶部距离left:200,// 距离左边距离（或自动居中）modal:true,// 模态（必须）shadow:true,closed:true,draggable:true,// 可拖拽resizable:true,// 可调整大小maximizable:true,// 显示最大化按钮minimizable:true,// 显示最小化按钮collapsible:true,// 显示折叠按钮iconCls:'icon-edit',onBeforeClose:function(){returnconfirm('确定关闭窗口吗？未保存数据将丢失！');},buttons:[{// 自定义底部按钮（推荐）text:'保存',iconCls:'icon-save',handler:function(){alert('保存成功！');$('#win').window('close');}},{text:'取消',handler:function(){$('#win').window('close');}}]});

方法4：居中显示 + 加载远程内容（超级常用！比如编辑表单）

<divid="editWin"class="easyui-window"title="编辑用户"data-options="modal:true,closed:true"style="width:600px;height:450px;"><!-- 内容通过href远程加载 --></div><script>// 打开窗口并加载表单页面functionopenEditWin(userId){$('#editWin').window({href:'edit_user.php?id='+userId,// 加载远程HTML/PHP页面onLoad:function(){// 加载完成后可以初始化表单等$('#editWin').window('center');// 重新居中（加载后高度变化时需要）}}).window('open').window('center');}</script><!-- 调用示例 --><ahref="javascript:void(0)"class="easyui-linkbutton"onclick="openEditWin(123)">编辑用户</a>