jQuery EasyUI 窗口 – 创建简单窗口

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

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

<!-- 先定义一个隐藏的div作为窗口内容 -->
<div id="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>
    <div style="margin-top:20px;text-align:center;">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#win').window('close')">关闭窗口</a>
    </div>
</div>

<!-- 按钮触发打开窗口 -->
<div style="padding:20px;">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-window" onclick="$('#win').window('open')">打开简单窗口</a>
</div>

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

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

<div style="padding:20px;">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="openDynamicWin()">动态创建窗口</a>
</div>

<script>
function openDynamicWin(){
    $('<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>

<!-- 可选：自定义底部按钮 -->
<div id="win-footer" style="text-align:right;padding:5px;">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dynamicWin').window('close')">取消</a>
    <a href="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(){
        return confirm('确定关闭窗口吗？未保存数据将丢失！');
    },
    buttons: [{             // 自定义底部按钮（推荐）
        text:'保存',
        iconCls:'icon-save',
        handler:function(){
            alert('保存成功！');
            $('#win').window('close');
        }
    },{
        text:'取消',
        handler:function(){
            $('#win').window('close');
        }
    }]
});

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

<div id="editWin" class="easyui-window" title="编辑用户" data-options="modal:true,closed:true" style="width:600px;height:450px;">
    <!-- 内容通过href远程加载 -->
</div>

<script>
// 打开窗口并加载表单页面
function openEditWin(userId){
    $('#editWin').window({
        href: 'edit_user.php?id=' + userId,  // 加载远程HTML/PHP页面
        onLoad: function(){
            // 加载完成后可以初始化表单等
            $('#editWin').window('center');  // 重新居中（加载后高度变化时需要）
        }
    }).window('open').window('center');
}
</script>

<!-- 调用示例 -->
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="openEditWin(123)">编辑用户</a>

你现在直接复制方法1的完整代码到你的页面，刷新一下就能看到一个完美的 EasyUI 窗口了！
结合之前的 datagrid（比如双击行打开编辑窗口），你的后台系统弹窗功能就齐活了。

想要我给你一个完整的HTML示例（带表单 + 验证 + 保存 + 居中 + 远程加载）？
或者你告诉我你想做什么窗口（比如“新增用户”“查看详情”“确认删除”“登录框”），我2分钟发你精准代码，复制就能跑！

快说说你的具体需求，我手把手帮你搞定，5分钟内看到超级专业的窗口效果！