🚀 CoolAlertJS

CoolAlertJS is a powerful, modern, and ultra-lightweight replacement for native JavaScript popup boxes. Featuring stunning glassmorphism design, smooth animations, and drag-and-drop functionality, it seamlessly incorporates both modal dialogs and toast notifications. Built for developers who demand beauty, performance, and ease of use.

✨ Zero dependencies • 🎨 Glassmorphism design • 📱 Fully responsive • 🎯 Promise-based API • 🖱️ Draggable modals • ⚡ Lightning fast

🎯 Features

• 🎨 Modern Design: Beautiful glassmorphism effects with vibrant gradients
• 🖱️ Draggable Modals: Smooth drag-and-drop functionality with visual feedback
• 🍞 Toast Notifications: Non-intrusive toast messages with customizable positions
• 📱 Responsive: Perfect on all devices and screen sizes
• ⚡ Promise-Based: Clean async/await support just like SweetAlert
• 🎭 Rich Animations: Smooth transitions and engaging micro-interactions
• 🎛️ Highly Customizable: Extensive options for every use case
• 🪶 Lightweight: < 15KB gzipped, zero dependencies
• ♿ Accessible: Full keyboard navigation and screen reader support
• 🔧 Developer Friendly: Simple API with TypeScript support

📦 Installation

NPM

npm install coolalertjs

CDN

<script src="https://cdn.jsdelivr.net/npm/coolalertjs@latest/dist/coolalert.min.js"></script>

Download

Download the latest release from GitHub

🚀 Quick Start

Basic Usage

// Simple alert
CoolAlert.show('This is a basic alert');

// Success message
CoolAlert.show({
    icon: 'success',
    title: 'Great!',
    text: 'Everything worked perfectly!'
});

Promise-Based Confirmation

CoolAlert.show({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Yes, delete it!'
}).then((result) => {
    if (result.isConfirmed) {
        CoolAlert.show('Deleted!', 'Your file has been deleted.', 'success');
    }
});

Toast Notifications

// Quick toast
CoolAlert.show({
    toast: true,
    icon: 'success',
    text: 'Settings saved successfully!',
    position: 'top-right'
});

Advanced with PreConfirm

CoolAlert.show({
    title: 'Submit your data?',
    icon: 'question',
    showCancelButton: true,
    showLoaderOnConfirm: true,
    preConfirm: async () => {
        const response = await fetch('/api/submit', {
            method: 'POST',
            body: JSON.stringify(data)
        });
        if (!response.ok) throw new Error('Network error');
        return response.json();
    }
}).then((result) => {
    if (result.isConfirmed) {
        CoolAlert.show('Success!', 'Data submitted successfully', 'success');
    }
});

🎨 Available Icons

• success ✓
• error ✕
• warning ⚠
• info ℹ
• question ?

📋 Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | title | string | '' | Title of the modal | | text | string | '' | Text to be displayed in the modal | | html | string | '' | HTML content to be displayed in the modal | | icon | string | 'info' | Icon type (success, error, warning, info, question) | | showConfirmButton | boolean | true | Show confirm button or not | | confirmButtonText | string | 'Continue' | Text for confirm button | | confirmButtonColor | string | '#6c5ce7' | Color of confirm button | | showDenyButton | boolean | false | Show deny button or not | | denyButtonText | string | 'Deny' | Text for deny button | | denyButtonColor | string | '#b00' | Color of deny button | | showCancelButton | boolean | true | Show cancel button or not | | cancelButtonText | string | 'Cancel' | Text for cancel button | | cancelButtonColor | string | 'rgba(255, 255, 255, 0.1)' | Color of cancel button | | showCloseIcon | boolean | false | Show close icon or not | | toast | boolean | false | Show toast instead of modal | | position | string | 'top-right' | Position of toast | | draggable | boolean | false | Enable dragging of the modal | | preConfirm | function | null | Function to execute before confirming | | allowOutsideClick | boolean/function | true | Allow modal to be closed outside of it |

Toast Positions

• top-left
• top-right (default)
• bottom-left
• bottom-right
• top-center
• bottom-center

🎯 API Methods

CoolAlert.show(options)

Main method to display alerts. Returns a Promise.

// String parameter (simple alert)
CoolAlert.show('Hello World!');

// Object parameter (full options)
CoolAlert.show({
    title: 'Custom Alert',
    text: 'This is customizable!',
    icon: 'info'
});

CoolAlert.isLoading()

Check if a preConfirm operation is currently running.

if (CoolAlert.isLoading()) {
    console.log('Still processing...');
}

CoolAlert.initializeStyles(config)

Override default styling with custom configuration.

CoolAlert.initializeStyles({
    overlay: "rgba(0, 0, 0, 0.8)",
    background: "#011627",
    primary: "#6c5ce7",
    secondary: "rgba(255, 255, 255, 0.1)",
    success: "#089f4d",
    warning: "#ff8513",
    info: "#74b9ff",
    error: "#b00",
    question: "#d89f04",
    text: "rgba(255, 255, 255, 0.9)",
    title: "rgba(255, 255, 255, 0.9)",
    closeBtn: "rgba(255, 255, 255, 0.7)"
});

🎨 Theming & Customization

Custom Styling Configuration

CoolAlert.initializeStyles({
    overlay: "rgba(0, 0, 0, 0.8)",
    background: "#011627",
    primary: "#6c5ce7",
    secondary: "rgba(255, 255, 255, 0.1)",
    success: "#089f4d",
    warning: "#ff8513",
    info: "#74b9ff",
    error: "#b00",
    question: "#d89f04",
    text: "rgba(255, 255, 255, 0.9)",
    title: "rgba(255, 255, 255, 0.9)",
    closeBtn: "rgba(255, 255, 255, 0.7)"
});

Advanced CSS Customization

/* Override specific components */
.cool-alert-modal {
    border-radius: 15px;
    backdrop-filter: blur(25px);
}

.cool-alert-modal-btn.my-custom-btn {
    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
    border-radius: 50px;
}

🎭 Result Object

The Promise resolves with a result object:

{
    isConfirmed: boolean,    // true if user clicked confirm
    isDenied: boolean,       // true if user clicked deny
    isDismissed: boolean,    // true if modal was dismissed
    value: any,              // result from preConfirm function
    dismiss: string          // dismissal reason ('cancel', 'close', 'outside')
}

🌟 Examples

Complete Example with All Options

CoolAlert.show({
    icon: "success",
    title: "WELCOME",
    text: "Login to proceed",
    html: '',
    
    showConfirmButton: false,
    confirmButtonText: "Proceed",
    confirmButtonColor: "#6c5ce7",
    
    showDenyButton: true,
    denyButtonText: "Deny",
    denyButtonColor: "#b00",
    
    showCancelButton: false,
    cancelButtonText: "Cancel",
    cancelButtonColor: "rgba(255, 255, 255, 0.1)",
    
    showCloseIcon: false,
    
    toast: true,
    position: "top-right",
    
    draggable: true,
    
    preConfirm: () => {
        return fetch('https://jsonplaceholder.typicode.com/posts/1', {
            method: 'GET',
            headers: { 'Content-Type': 'application/json' },
        })
        .then(response => {
            if (!response.ok) throw new Error(response.statusText);
            return response.json();
        })
        .catch(error => {
            throw new Error('Error: ' + error.message);
        });
    },
    allowOutsideClick: () => !CoolAlert.isLoading()
    
}).then((result) => {
    console.log(result);
    if (result.isConfirmed) {
        CoolAlert.show({
            title: result.value.title,
            text: result.value.title,
            icon: "error",
            toast: "bottom-left"
        });
    }
    
    if (result.isDenied) {
        CoolAlert.show({
            title: "Denied",
            text: "Changes not saved",
            icon: "error",
        });
    }
});

Draggable Modal

CoolAlert.show({
    title: 'Drag me around!',
    text: 'This modal is draggable',
    icon: 'info',
    draggable: true,
    showCancelButton: true
});

Toast with Custom Position

CoolAlert.show({
    toast: true,
    position: 'bottom-left',
    icon: 'success',
    title: 'Success!',
    text: 'Operation completed'
});

Three-Button Modal

CoolAlert.show({
    title: 'Save your changes?',
    text: 'Your changes will be lost if you don\'t save them.',
    icon: 'question',
    showCancelButton: true,
    showDenyButton: true,
    confirmButtonText: 'Save',
    denyButtonText: 'Don\'t save',
    cancelButtonText: 'Cancel'
}).then((result) => {
    if (result.isConfirmed) {
        CoolAlert.show('Saved!', '', 'success');
    } else if (result.isDenied) {
        CoolAlert.show('Changes are not saved', '', 'info');
    }
});

📱 Browser Support

CoolAlertJS works on all modern browsers:

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+
• Mobile browsers (iOS Safari, Chrome Mobile)

🤝 Migration from SweetAlert

CoolAlertJS is designed to be a drop-in replacement for SweetAlert2:

// SweetAlert2
Swal.fire('Hello world!');

// CoolAlertJS
CoolAlert.show('Hello world!');

Most SweetAlert2 options work directly with CoolAlertJS!

📚 Documentation

For complete documentation, advanced examples, and interactive demos, visit:

🌐 www.coolalertjs.com

🛠️ Development

# Clone repository
git clone https://github.com/JosephChuks/coolalertjs.git

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm test

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by SweetAlert2's API design
• Icons from various open-source icon libraries
• Community feedback and contributions

📞 Support

• 📖 Documentation: www.coolalertjs.com
• 🐛 Bug Reports: GitHub Issues
• 💬 Discussions: GitHub Discussions
• 📧 Email: [email protected]

⭐ Show Your Support

If CoolAlertJS helped you, please consider giving it a ⭐ on GitHub!

Made with ❤️ for developers

Website • Documentation • Examples • GitHub