首页 / 组件 / 对话框组件

对话框组件

对话框是一种模态窗口，在当前页面打开一个浮层，承载相关操作或反馈信息。常用于需要用户处理事务，又不希望跳转页面的场景。

反馈 信息提示 交互

基础用法

基础的对话框，包含标题、内容和底部操作按钮。

注意：当前展示的是静态组件示例。如需自定义样式，请使用AI编辑器进行修改。
对话框标题

这是一个基础对话框，您可以在此处添加任何内容。

对话框支持多行文本和各种HTML元素。

HTML 
<!-- 对话框遮罩层 -->
<div class="dialog-mask">
    <!-- 对话框容器 -->
    <div class="dialog">
        <!-- 对话框头部 -->
        <div class="dialog-header">
            <div class="dialog-title">对话框标题</div>
            <div class="dialog-close"><i class="mdi mdi-close"></i></div>
        </div>
        <!-- 对话框内容 -->
        <div class="dialog-body">
            <p>这是一个基础对话框，您可以在此处添加任何内容。</p>
            <p>对话框支持多行文本和各种HTML元素。</p>
        </div>
        <!-- 对话框底部按钮 -->
        <div class="dialog-footer">
            <button class="btn btn-secondary">取消</button>
            <button class="btn btn-primary">确认</button>
        </div>
    </div>
</div>
JavaScript 
// 创建并显示对话框
function showDialog() {
    // 创建遮罩层
    const mask = document.createElement('div');
    mask.className = 'dialog-mask';
    
    // 创建对话框
    const dialog = document.createElement('div');
    dialog.className = 'dialog';
    
    // 对话框头部
    const header = document.createElement('div');
    header.className = 'dialog-header';
    header.innerHTML = `
        <div class="dialog-title">对话框标题</div>
        <div class="dialog-close"><i class="mdi mdi-close"></i></div>
    `;
    
    // 对话框内容
    const body = document.createElement('div');
    body.className = 'dialog-body';
    body.innerHTML = `
        <p>这是一个基础对话框，您可以在此处添加任何内容。</p>
        <p>对话框支持多行文本和各种HTML元素。</p>
    `;
    
    // 对话框底部
    const footer = document.createElement('div');
    footer.className = 'dialog-footer';
    footer.innerHTML = `
        <button class="btn btn-secondary">取消</button>
        <button class="btn btn-primary">确认</button>
    `;
    
    // 组装对话框
    dialog.appendChild(header);
    dialog.appendChild(body);
    dialog.appendChild(footer);
    mask.appendChild(dialog);
    document.body.appendChild(mask);
    
    // 绑定关闭事件
    const closeBtn = header.querySelector('.dialog-close');
    closeBtn.addEventListener('click', () => {
        document.body.removeChild(mask);
    });
    
    const cancelBtn = footer.querySelector('.btn-secondary');
    cancelBtn.addEventListener('click', () => {
        document.body.removeChild(mask);
    });
    
    // 阻止点击对话框内部关闭对话框
    dialog.addEventListener('click', (e) => {
        e.stopPropagation();
    });
    
    // 点击遮罩层关闭对话框
    mask.addEventListener('click', () => {
        document.body.removeChild(mask);
    });
    
    return dialog;
}

// 绑定按钮点击事件
document.getElementById('show-basic-dialog').addEventListener('click', showDialog);

不同尺寸

对话框有三种不同尺寸：小型、默认和大型，适用于不同内容量的场景。

HTML 
<!-- 小型对话框 -->
<div class="dialog-mask">
    <div class="dialog dialog-small">
        <div class="dialog-header">
            <div class="dialog-title">小型对话框</div>
            <div class="dialog-close"><i class="mdi mdi-close"></i></div>
        </div>
        <div class="dialog-body">
            <p>小型对话框适用于简单的确认信息。</p>
        </div>
        <div class="dialog-footer">
            <button class="btn btn-secondary">取消</button>
            <button class="btn btn-primary">确认</button>
        </div>
    </div>
</div>

<!-- 默认对话框 -->
<div class="dialog-mask">
    <div class="dialog">
        <div class="dialog-header">
            <div class="dialog-title">默认对话框</div>
            <div class="dialog-close"><i class="mdi mdi-close"></i></div>
        </div>
        <div class="dialog-body">
            <p>默认对话框适用于常规内容展示。</p>
        </div>
        <div class="dialog-footer">
            <button class="btn btn-secondary">取消</button>
            <button class="btn btn-primary">确认</button>
        </div>
    </div>
</div>

<!-- 大型对话框 -->
<div class="dialog-mask">
    <div class="dialog dialog-large">
        <div class="dialog-header">
            <div class="dialog-title">大型对话框</div>
            <div class="dialog-close"><i class="mdi mdi-close"></i></div>
        </div>
        <div class="dialog-body">
            <p>大型对话框适用于复杂表单或大量内容展示。</p>
        </div>
        <div class="dialog-footer">
            <button class="btn btn-secondary">取消</button>
            <button class="btn btn-primary">确认</button>
        </div>
    </div>
</div>
JavaScript 
// 创建对话框函数，增加size参数
function createDialog(size = '') {
    // 创建遮罩层
    const mask = document.createElement('div');
    mask.className = 'dialog-mask';
    
    // 创建对话框，添加尺寸类
    const dialog = document.createElement('div');
    dialog.className = 'dialog';
    if (size) {
        dialog.classList.add(`dialog-${size}`);
    }
    
    // 对话框头部
    const header = document.createElement('div');
    header.className = 'dialog-header';
    
    let title = '默认对话框';
    if (size === 'small') title = '小型对话框';
    if (size === 'large') title = '大型对话框';
    
    header.innerHTML = `
        <div class="dialog-title">${title}</div>
        <div class="dialog-close"><i class="mdi mdi-close"></i></div>
    `;
    
    // 对话框内容
    const body = document.createElement('div');
    body.className = 'dialog-body';
    
    let content = '默认对话框适用于常规内容展示。';
    if (size === 'small') content = '小型对话框适用于简单的确认信息。';
    if (size === 'large') content = '大型对话框适用于复杂表单或大量内容展示。';
    
    body.innerHTML = `<p>${content}</p>`;
    
    // 对话框底部
    const footer = document.createElement('div');
    footer.className = 'dialog-footer';
    
    if (Array.isArray(buttonText)) {
        footer.innerHTML = `
            <button class="btn ${buttonClass[0]}">${buttonText[0]}</button>
            <button class="btn ${buttonClass[1]}">${buttonText[1]}</button>
        `;
    } else {
        footer.innerHTML = `<button class="btn ${buttonClass}">${buttonText}</button>`;
    }
    
    // 组装对话框
    dialog.appendChild(header);
    dialog.appendChild(body);
    dialog.appendChild(footer);
    mask.appendChild(dialog);
    document.body.appendChild(mask);
    
    // 绑定关闭事件
    const closeBtn = header.querySelector('.dialog-close');
    closeBtn.addEventListener('click', () => {
        document.body.removeChild(mask);
    });
    
    // 绑定按钮事件
    const buttons = footer.querySelectorAll('.btn');
    buttons.forEach(btn => {
        btn.addEventListener('click', () => {
            document.body.removeChild(mask);
        });
    });
    
    // 阻止点击对话框内部关闭对话框
    dialog.addEventListener('click', (e) => {
        e.stopPropagation();
    });
    
    // 点击遮罩层关闭对话框
    mask.addEventListener('click', () => {
        document.body.removeChild(mask);
    });
    
    return dialog;
}

// 绑定不同尺寸对话框按钮点击事件
document.getElementById('show-small-dialog').addEventListener('click', () => createDialog('small'));
document.getElementById('show-default-dialog').addEventListener('click', () => createDialog());
document.getElementById('show-large-dialog').addEventListener('click', () => createDialog('large'));

消息对话框

根据使用场景，对话框有不同类型，包括信息提示、成功提示、警告提示和错误提示。

HTML 
<!-- 信息对话框 -->
<div class="dialog-mask">
    <div class="dialog dialog-info">
        <div class="dialog-header">
            <div class="dialog-icon"><i class="mdi mdi-information"></i></div>
            <div class="dialog-title">信息提示</div>
            <div class="dialog-close"><i class="mdi mdi-close"></i></div>
        </div>
        <div class="dialog-body">
            <p>这是一条重要的信息提示。</p>
        </div>
        <div class="dialog-footer">
            <button class="btn btn-primary">我知道了</button>
        </div>
    </div>
</div>

<!-- 成功对话框 -->
<div class="dialog-mask">
    <div class="dialog dialog-success">
        <div class="dialog-header">
            <div class="dialog-icon"><i class="mdi mdi-check-circle"></i></div>
            <div class="dialog-title">操作成功</div>
            <div class="dialog-close"><i class="mdi mdi-close"></i></div>
        </div>
        <div class="dialog-body">
            <p>您的操作已成功完成。</p>
        </div>
        <div class="dialog-footer">
            <button class="btn btn-primary">确定</button>
        </div>
    </div>
</div>

<!-- 警告对话框 -->
<div class="dialog-mask">
    <div class="dialog dialog-warning">
        <div class="dialog-header">
            <div class="dialog-icon"><i class="mdi mdi-alert"></i></div>
            <div class="dialog-title">操作警告</div>
            <div class="dialog-close"><i class="mdi mdi-close"></i></div>
        </div>
        <div class="dialog-body">
            <p>此操作需要注意，是否继续？</p>
        </div>
        <div class="dialog-footer">
            <button class="btn btn-secondary">取消</button>
            <button class="btn btn-primary">继续</button>
        </div>
    </div>
</div>

<!-- 错误对话框 -->
<div class="dialog-mask">
    <div class="dialog dialog-error">
        <div class="dialog-header">
            <div class="dialog-icon"><i class="mdi mdi-alert-circle"></i></div>
            <div class="dialog-title">错误提示</div>
            <div class="dialog-close"><i class="mdi mdi-close"></i></div>
        </div>
        <div class="dialog-body">
            <p>操作失败，请检查并重试。</p>
        </div>
        <div class="dialog-footer">
            <button class="btn btn-danger">重试</button>
        </div>
    </div>
</div>
JavaScript 
// 创建消息对话框函数
function createMessageDialog(type) {
    // 创建遮罩层
    const mask = document.createElement('div');
    mask.className = 'dialog-mask';
    
    // 创建对话框
    const dialog = document.createElement('div');
    dialog.className = `dialog dialog-${type}`;
    
    // 配置不同类型对话框的属性
    let iconClass, title, message, buttonText, buttonClass;
    
    switch(type) {
        case 'info':
            iconClass = 'mdi-information';
            title = '信息提示';
            message = '这是一条重要的信息提示。';
            buttonText = '我知道了';
            buttonClass = 'btn-primary';
            break;
        case 'success':
            iconClass = 'mdi-check-circle';
            title = '操作成功';
            message = '您的操作已成功完成。';
            buttonText = '确定';
            buttonClass = 'btn-primary';
            break;
        case 'warning':
            iconClass = 'mdi-alert';
            title = '操作警告';
            message = '此操作需要注意，是否继续？';
            buttonText = ['取消', '继续'];
            buttonClass = ['btn-secondary', 'btn-primary'];
            break;
        case 'error':
            iconClass = 'mdi-alert-circle';
            title = '错误提示';
            message = '操作失败，请检查并重试。';
            buttonText = '重试';
            buttonClass = 'btn-danger';
            break;
    }
    
    // 对话框头部
    const header = document.createElement('div');
    header.className = 'dialog-header';
    header.innerHTML = `
        <div class="dialog-icon"><i class="mdi ${iconClass}"></i></div>
        <div class="dialog-title">${title}</div>
        <div class="dialog-close"><i class="mdi mdi-close"></i></div>
    `;
    
    // 对话框内容
    const body = document.createElement('div');
    body.className = 'dialog-body';
    body.innerHTML = `<p>${message}</p>`;
    
    // 对话框底部
    const footer = document.createElement('div');
    footer.className = 'dialog-footer';
    
    if (Array.isArray(buttonText)) {
        footer.innerHTML = `
            <button class="btn ${buttonClass[0]}">${buttonText[0]}</button>
            <button class="btn ${buttonClass[1]}">${buttonText[1]}</button>
        `;
    } else {
        footer.innerHTML = `<button class="btn ${buttonClass}">${buttonText}</button>`;
    }
    
    // 组装对话框
    dialog.appendChild(header);
    dialog.appendChild(body);
    dialog.appendChild(footer);
    mask.appendChild(dialog);
    document.body.appendChild(mask);
    
    // 绑定关闭事件
    const closeBtn = header.querySelector('.dialog-close');
    closeBtn.addEventListener('click', () => {
        document.body.removeChild(mask);
    });
    
    // 绑定按钮事件
    const buttons = footer.querySelectorAll('.btn');
    buttons.forEach(btn => {
        btn.addEventListener('click', () => {
            document.body.removeChild(mask);
        });
    });
    
    // 阻止点击对话框内部关闭对话框
    dialog.addEventListener('click', (e) => {
        e.stopPropagation();
    });
    
    // 点击遮罩层关闭对话框
    mask.addEventListener('click', () => {
        document.body.removeChild(mask);
    });
    
    return dialog;
}

// 绑定不同类型消息对话框按钮点击事件
document.getElementById('show-info-dialog').addEventListener('click', () => createMessageDialog('info'));
document.getElementById('show-success-dialog').addEventListener('click', () => createMessageDialog('success'));
document.getElementById('show-warning-dialog').addEventListener('click', () => createMessageDialog('warning'));
document.getElementById('show-error-dialog').addEventListener('click', () => createMessageDialog('error'));

自定义内容

对话框可以包含复杂的内容，例如表单、图表或其他复杂的组件。

HTML 
<!-- 带表单的对话框 -->
<div class="dialog-mask">
    <div class="dialog">
        <div class="dialog-header">
            <div class="dialog-title">用户信息</div>
            <div class="dialog-close"><i class="mdi mdi-close"></i></div>
        </div>
        <div class="dialog-body">
            <form id="user-form">
                <div style="margin-bottom: 16px;">
                    <label for="username" style="display: block; margin-bottom: 8px;">用户名</label>
                    <input type="text" id="username" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                </div>
                <div style="margin-bottom: 16px;">
                    <label for="email" style="display: block; margin-bottom: 8px;">邮箱</label>
                    <input type="email" id="email" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                </div>
                <div>
                    <label for="role" style="display: block; margin-bottom: 8px;">角色</label>
                    <select id="role" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                        <option value="admin">管理员</option>
                        <option value="user">普通用户</option>
                        <option value="guest">访客</option>
                    </select>
                </div>
            </form>
        </div>
        <div class="dialog-footer">
            <button class="btn btn-secondary">取消</button>
            <button class="btn btn-primary">提交</button>
        </div>
    </div>
</div>
JavaScript 
// 创建表单对话框
function createFormDialog() {
    // 创建遮罩层
    const mask = document.createElement('div');
    mask.className = 'dialog-mask';
    
    // 创建对话框
    const dialog = document.createElement('div');
    dialog.className = 'dialog';
    
    // 对话框头部
    const header = document.createElement('div');
    header.className = 'dialog-header';
    header.innerHTML = `
        <div class="dialog-title">用户信息</div>
        <div class="dialog-close"><i class="mdi mdi-close"></i></div>
    `;
    
    // 对话框内容
    const body = document.createElement('div');
    body.className = 'dialog-body';
    body.innerHTML = `
        <form id="user-form">
            <div style="margin-bottom: 16px;">
                <label for="username" style="display: block; margin-bottom: 8px;">用户名</label>
                <input type="text" id="username" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            <div style="margin-bottom: 16px;">
                <label for="email" style="display: block; margin-bottom: 8px;">邮箱</label>
                <input type="email" id="email" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            <div>
                <label for="role" style="display: block; margin-bottom: 8px;">角色</label>
                <select id="role" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                    <option value="admin">管理员</option>
                    <option value="user">普通用户</option>
                    <option value="guest">访客</option>
                </select>
            </div>
        </form>
    `;
    
    // 对话框底部
    const footer = document.createElement('div');
    footer.className = 'dialog-footer';
    footer.innerHTML = `
        <button class="btn btn-secondary">取消</button>
        <button class="btn btn-primary">提交</button>
    `;
    
    // 组装对话框
    dialog.appendChild(header);
    dialog.appendChild(body);
    dialog.appendChild(footer);
    mask.appendChild(dialog);
    document.body.appendChild(mask);
    
    // 绑定关闭事件
    const closeBtn = header.querySelector('.dialog-close');
    closeBtn.addEventListener('click', () => {
        document.body.removeChild(mask);
    });
    
    // 绑定取消按钮事件
    const cancelBtn = footer.querySelector('.btn-secondary');
    cancelBtn.addEventListener('click', () => {
        document.body.removeChild(mask);
    });
    
    // 绑定提交按钮事件
    const submitBtn = footer.querySelector('.btn-primary');
    submitBtn.addEventListener('click', () => {
        const username = dialog.querySelector('#username').value;
        const email = dialog.querySelector('#email').value;
        const role = dialog.querySelector('#role').value;
        
        console.log('提交的表单数据：', { username, email, role });
        document.body.removeChild(mask);
    });
    
    // 阻止点击对话框内部关闭对话框
    dialog.addEventListener('click', (e) => {
        e.stopPropagation();
    });
    
    // 点击遮罩层关闭对话框
    mask.addEventListener('click', () => {
        document.body.removeChild(mask);
    });
    
    return dialog;
}

// 绑定表单对话框按钮点击事件
document.getElementById('show-form-dialog').addEventListener('click', createFormDialog);

API

对话框组件的属性和类。

类名 说明 类型 默认值
dialog-mask 对话框遮罩层，用于覆盖整个页面 string -
dialog 对话框容器 string -
dialog-small 小型对话框 string -
dialog-large 大型对话框 string -
dialog-header 对话框头部 string -
dialog-title 对话框标题 string -
dialog-close 对话框关闭按钮 string -
dialog-body 对话框内容区域 string -
dialog-footer 对话框底部 string -
dialog-info 信息类型对话框 string -
dialog-success 成功类型对话框 string -
dialog-warning 警告类型对话框 string -
dialog-error 错误类型对话框 string -
dialog-icon 对话框图标 string -

JavaScript函数

方法名 说明 参数 返回值
showDialog 显示基础对话框 - dialog元素
createDialog 创建不同尺寸的对话框 (size) dialog元素
createMessageDialog 创建消息类型对话框 (type) dialog元素
createFormDialog 创建带表单的对话框 - dialog元素