jQuery EasyUI 窗口 – 创建对话框

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

方法1：最简单最常用 – 基本对话框（推荐现在就用这个，3秒出效果）

<!-- 定义一个对话框 -->
<div id="dlg" class="easyui-dialog" title="用户登录" style="width:400px;height:300px;padding:20px;"
    data-options="
        iconCls:'icon-login',
        modal:true,              <!-- 模态遮罩 -->
        closed:true,             <!-- 默认关闭 -->
        buttons:'#dlg-buttons'   <!-- 指定底部按钮栏 -->
    ">
    <form id="loginForm" method="post">
        <div style="margin-bottom:20px;">
            <input class="easyui-textbox" name="username" style="width:100%;" data-options="label:'用户名:',required:true,iconCls:'icon-man'">
        </div>
        <div style="margin-bottom:20px;">
            <input class="easyui-passwordbox" name="password" style="width:100%;" data-options="label:'密码:',required:true">
        </div>
        <div style="margin-bottom:20px;">
            <input class="easyui-checkbox" name="remember" label="记住登录状态">
        </div>
    </form>
</div>

<!-- 底部按钮栏 -->
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="submitLogin()">登录</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#dlg').dialog('close')">取消</a>
</div>

<!-- 触发打开对话框的按钮 -->
<div style="padding:20px;">
    <a href="javascript:void(0)" class="easyui-linkbutton c8" iconCls="icon-login" onclick="$('#dlg').dialog('open')">打开登录对话框</a>
</div>

<script>
function submitLogin(){
    if($('#loginForm').form('validate')){
        $.messager.progress();  // 显示进度条
        // 模拟登录
        setTimeout(function(){
            $.messager.progress('close');
            $.messager.alert('成功','登录成功！欢迎回来','info');
            $('#dlg').dialog('close');
        },1000);
    }
}
</script>

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

方法2：JS动态创建对话框（更灵活，适合通用弹窗）

function openCommonDialog(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');  // 关闭后销毁
        }
    });
}

// 调用示例
function showInfo(){
    openCommonDialog('系统提示', '<div style="padding:20px;font-size:16px;">这是一个动态创建的对话框！</div>', 400, 200);
}

方法3：远程加载内容的对话框（超级常用！编辑/新增表单）

<div id="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>
function openEdit(id){
    $('#editDlg').dialog({
        title: id ? '编辑用户' : '新增用户',
        href: 'edit_user.php?id=' + (id || '')  // 加载远程表单页面
    }).dialog('open').dialog('center');
}
</script>

<!-- 调用 -->
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="openEdit(123)">编辑用户</a>
<a href="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 对话框了！
dialog 比 window 更适合做表单、确认、提示类弹窗，因为默认样式和按钮更标准。

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

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