CoolAlertJS

The modern, lightweight, and beautiful replacement for JavaScript popup boxes. Features glassmorphism design, drag functionality, and toast notifications.

Try the demo above to see it in action. You can paste any coolalertjs code to test.

Modern Design

Beautiful glassmorphism effects with vibrant gradients and smooth animations that make your alerts stand out.

Draggable Modals

Interactive drag-and-drop functionality with visual feedback and smooth positioning constraints.

Toast Notifications

Non-intrusive toast messages with customizable positions and auto-dismiss functionality.

Promise-Based API

Clean async/await support with comprehensive result handling, just like SweetAlert.

Lightweight

Less than 15KB gzipped with zero dependencies. Fast loading and minimal impact on performance.

Fully Responsive

Perfect on all devices and screen sizes with touch-friendly interactions and mobile optimization.

Getting Started

Welcome to the CoolAlertJS, 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.

Quick Start

New to CoolAlertJS? Start with the Installation section and then check out Basic Usage to get up and running quickly.

Installation

CoolAlertJS can be installed through multiple methods. Choose the one that best fits your project setup:

NPM

Install via npm for use in modern JavaScript projects:

Then import in your JavaScript:

CDN

Include directly in your HTML for quick setup:

CoolAlertJS is now available globally as CoolAlert.

Download

Download the latest release from GitHub:

Then include in your HTML:

<script src="path/to/coolalert.min.js"></script>

Basic Usage

Getting started with CoolAlertJS is simple. Here are the most common use cases:

Simple Alert

Success Message

Confirmation Dialog

Toast Notification

Configuration

CoolAlertJS offers extensive configuration options to customize the appearance and behavior of your alerts.

Modal 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
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 Options

Option Type Default Description
toast boolean false Show toast instead of modal
position string 'top-right' Position of toast (top-left, top-right, bottom-left, bottom-right, top-center, bottom-center)

Custom Styling

You can customize the appearance of CoolAlertJS by using the initializeStyles() method with a configuration object:

Note

Call initializeStyles() before using any CoolAlertJS methods to ensure your custom styles are applied.

API Reference

CoolAlert.show(options)

The main method to display alerts. Returns a Promise that resolves with the user's action.

Parameters:

  • options (string | object): Alert configuration or simple text message

Returns:

Promise that resolves with a result object.

Examples:

CoolAlert.isLoading()

Check if a preConfirm operation is currently running.

Returns:

Boolean indicating if a loading operation is active.

Example:

CoolAlert.initializeStyles(config)

Override default styling with custom configuration.

Parameters:

  • config (object): Styling configuration object

Example:

Result Object

The Promise returned by CoolAlert.show() resolves with a result object containing information about the user's action:

Usage Example:

Migration Guide

CoolAlertJS is designed to be a drop-in replacement for SweetAlert2. Here's how to migrate:

Method Name Changes

Compatible Options

Most SweetAlert2 options work directly with CoolAlertJS:

New Features in CoolAlertJS

CoolAlertJS adds several new features not available in SweetAlert2:

Migration Tip

You can often just replace Swal.fire with CoolAlert.show and your existing code will work!

Examples

Simple Alert

A basic alert with just a message. Perfect for simple notifications.

Success Message

Success alert with icon, title, and message. Great for confirming successful operations.

Error Alert

Error alert to inform users about failures or issues that need attention.

Info Alert

Informational alert for providing helpful information to users.

Confirmation Dialog

Ask for user confirmation before performing destructive actions.

Three Button Modal

Modal with three action buttons: Save, Don't Save, and Cancel.

Draggable Modal

Interactive modal that can be dragged around the screen with smooth animations.

Loading with PreConfirm

Show loading state while processing async operations before confirming.

Success Toast

Non-intrusive toast notification that appears in the corner of the screen.

Toast Positions

Toast notifications can be positioned in different corners of the screen.

HTML Content

Use HTML content instead of plain text for rich formatting and interactive elements.

Complete Example

A comprehensive example showing all available options and features.