Attractive Alert (Atal)

一个美观、轻量、易用的 JavaScript 弹框库，原生实现无依赖。

安装使用

CDN 快速引入

<!-- unpkg -->
<script src="https://unpkg.com/atal"></script>

<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/atal/dist/atal.js"></script>

Git 获取

git clone https://gitee.com/wxy-code/atal.git

NPM 安装

npm install atal

import Atal from 'atal';
// 或
const Atal = require('atal');

快速上手

基础弹窗

// 简单提示
Atal.alert('欢迎', '欢迎使用 Atal 弹框库', 'info');

// 成功提示
Atal.alert('成功', '操作已完成', 'success');

// 警告确认
Atal.alert('确认删除', '删除后无法恢复', 'warning')
    .ok(() => console.log('已删除'))
    .cancel(() => console.log('已取消'));

完整配置

Atal.alert({
    title: '自定义标题',
    content: '支持文本、HTML或DOM节点',
    icon: 'success',          // 支持10+种图标
    timer: 3000,              // 3秒自动关闭
    html: false,              // 是否解析HTML
    animateIcon: true,        // 图标动画
    buttons: {
        confirm: '确定',      // 确认按钮
        cancel: '取消',       // 取消按钮
        custom: [             // 自定义按钮
            { text: '稍后', color: '#666' }
        ]
    }
});

图标展示

内置10+种精美动画图标：

• success - 成功（绿色）
• error - 错误（红色）
• warning - 警告（橙色）
• info - 信息（蓝色）
• question - 问题（紫色）
• heart - 爱心（粉色）
• star - 星星（黄色）
• download - 下载（蓝色）
• upload - 上传（蓝色）
• key - 钥匙（橙色）

高级功能

自定义图标颜色

Atal.alert({
    title: '自定义颜色',
    content: '图标和按钮颜色自定义',
    icon: {
        type: 'heart',
        color: '#E91E63'  // 自定义颜色
    },
    buttons: {
        confirm: {
            text: '喜欢',
            color: '#E91E63'  // 按钮颜色同步
        }
    }
});

多个自定义按钮

Atal.alert({
    title: '选择操作',
    content: '请选择下一步操作',
    icon: 'question',
    buttons: {
        confirm: false,  // 隐藏确认
        cancel: false,   // 隐藏取消
        custom: [
            { text: '保存草稿', color: '#FF9800' },
            { text: '预览效果', color: '#2196F3' },
            { text: '立即发布', color: '#4CAF50' }
        ]
    }
}).custom(data => {
    console.log('选择了:', data.index, data.button.text);
});

HTML 内容

Atal.alert({
    title: '富文本内容',
    content: `
        <div style="text-align: left; padding: 10px;">
            <h3>功能列表</h3>
            <ul>
                <li>✅ 美观的动画图标</li>
                <li>✅ 响应式设计</li>
                <li>✅ 多种按钮配置</li>
            </ul>
        </div>
    `,
    html: true,
    icon: 'info'
});

DOM 节点内容

const form = document.createElement('div');
form.innerHTML = \`
    <input type="email" placeholder="输入邮箱" style="width:100%;padding:8px;margin:5px 0;">
    <textarea placeholder="留言内容" rows="3" style="width:100%;padding:8px;"></textarea>
\`;

Atal.alert({
    title: '联系我们',
    content: form,
    icon: 'question'
});

链式调用

Atal.alert('确认操作', '请仔细确认信息', 'question')
    .created(el => console.log('弹窗已创建:', el))
    .ok(() => {
        Atal.alert('操作成功', '已提交处理', 'success');
    })
    .cancel(() => {
        Atal.alert('已取消', '操作已取消', 'info');
    })
    .custom(data => {
        console.log('自定义按钮:', data.index);
    });

快捷方法

预设配置

// 创建预设实例
const myAlert = Atal.at({
    icon: 'success',
    buttons: { confirm: '知道了' }
});

// 简化调用
myAlert('操作成功', '数据保存完成');
myAlert('更新提示', '版本已更新');

全局配置

// 设置默认配置
Atal.setDefaults({
    icon: 'info',
    animateIcon: true,
    buttons: {
        confirm: '确认',
        cancel: '取消'
    }
});

// 设置默认按钮文本
Atal.setDefaultButtons('好的', '不了');

// 替换原生 alert
Atal.native(); // 之后使用 alert() 将调用 Atal

动画控制

关闭动画

// 关闭图标动画
Atal.alert({
    title: '静态图标',
    content: '图标动画已关闭',
    icon: 'success',
    animateIcon: false
});

// 弹窗仍有弹性进入动画

手动关闭

const alert = Atal.alert('处理中', '请稍候...', 'info');

// 2秒后手动关闭
setTimeout(() => {
    alert.close('ok'); // 或 'cancel', 'custom'
}, 2000);

响应式特性

• 移动端适配（90%宽度）
• 按钮自动换行
• 字体大小自适应
• 触摸友好
• 键盘导航支持

样式自定义

CSS 自定义类

Atal.alert({
    title: '深色主题',
    content: '使用自定义样式类',
    className: 'dark-theme'
});

.dark-theme .atal-container {
    background: #2d3748;
    color: white;
}

.dark-theme .atal-title {
    color: #e2e8f0;
}

.dark-theme .atal-button {
    border-radius: 20px;
}

API 参考

Atal.alert(options)

创建弹窗，返回 Atal 实例。

options 参数：

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | title | string | '' | 弹窗标题 | | content | string/Node | '' | 内容（支持HTML） | | icon | string/object | '' | 图标类型或配置对象 | | timer | number | null | 自动关闭时间(ms) | | html | boolean | false | 是否解析HTML内容 | | animateIcon | boolean | true | 是否启用图标动画 | | allowOutsideClick | boolean | false | 是否允许点击外部关闭 | | buttons | object | {confirm:true, cancel:false} | 按钮配置 | | className | string | '' | 自定义CSS类名 |

实例方法

• .ok(callback) - 确认回调
• .cancel(callback) - 取消回调
• .custom(callback) - 自定义按钮回调
• .created(callback) - 弹窗创建回调
• .close(type, value) - 手动关闭

静态方法

• Atal.at(defaults) - 创建预设实例
• Atal.setDefaults(options) - 设置全局默认值
• Atal.setDefaultButtons(confirm, cancel) - 设置默认按钮
• Atal.native() - 替换原生alert

开发构建

项目脚本

# 开发构建
npm run build:dev    # 生成 atal.js (31KB)

# 生产构建
npm run build        # 生成 atal.min.js (21KB)

# 自动发布
npm run publish      # 构建并推送

文件大小

• 开发版本：31KB（未压缩）
• 生产版本：21KB（gzip压缩）
• 零依赖，原生实现

浏览器兼容

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+
• 现代移动浏览器

开源协议

MIT License © 王小玗

支持项目

喜欢这个项目？请给它一个 Star！

最后更新：2026年
体积：21KB (压缩后) / 31KB (压缩前)
特点：零依赖、原生实现、动画精美、配置灵活