SmoothAlert Documentation

SmoothAlert is a versatile JavaScript library for creating animated alerts, modals, and toast notifications. With SmoothAlert, you can customize messages with titles, buttons, images, animations, colors, positioning, and advanced styling using customStyles.

Installation

To get started, add SmoothAlert by including this script in the <head> section of your HTML file:

<script src="https://smoothalert.getmind.io/smoothalert.min.js"></script>

Basic Alert Usage

Use smoothAlert for simple alerts. For quick access, call alert() as a shortcut:

smoothAlert({ message: 'Welcome to SmoothAlert!' });

To globally replace the default alert() function, you can use:

alert('This uses SmoothAlert by default!');

Advanced Alert with Modal Options

Create custom modals by configuring smoothAlert with options such as title, buttons, customStyles for styling specific elements, and more.

Custom Modal with Title, Image, and Action Buttons

smoothAlert({
  title: 'Notice',
  message: 'This is a custom modal alert with multiple actions!',
  imageUrl: 'https://imguploader.de/images/2024/11/13/smoothalert-1.png',
  colors: { background: '#6366f1', textColor: '#ffffff' },
  buttons: [
    { 
      label: 'Yes', 
      color: '#10b981', 
      action: (modal) => {
        toast('Confirmed!');
        closeSmoothAlert(modal);
      } 
    },
    { 
      label: 'No', 
      color: '#ef4444', 
      action: closeSmoothAlert 
    }
  ],
  customStyles: {
    title: { color: "orange", fontSize: "2em" },
    image: { borderRadius: "8px", width: "100%" },
    button: { backgroundColor: "#8e00ff" }
  }
});

Advanced Example: Using Native JavaScript Functions in Actions

You can integrate any native JavaScript functions into the action property of smoothAlert buttons. Here’s an example that shows how to use console.log and window.location.href for button actions:

smoothAlert({
  title: 'JavaScript Actions',
  message: 'Explore different actions using JavaScript functions.',
  buttons: [
    { 
      label: 'Log Message', 
      color: '#3b82f6', 
      action: () => console.log('Log Button Clicked!') 
    },
    { 
      label: 'Go to Google', 
      color: '#f59e0b', 
      action: () => window.location.href = 'https://www.google.com' 
    },
    { 
      label: 'Close', 
      color: '#ef4444', 
      action: closeSmoothAlert 
    }
  ],
  customStyles: {
    title: { color: "#6b7280", fontSize: "1.8em" },
    message: { fontSize: "1.1em", color: "#374151" },
  }
});

Options Reference: `smoothAlert`

The smoothAlert function offers numerous customization options to tailor your alert's design and behavior:

message: Main message text for the alert.
title: Optional title text.
imageUrl: URL of an image or icon to display.
colors: Object with background and textColor properties for alert color customization.
fontSizes: Object with titleSize and messageSize to set font sizes.
position: Placement on screen (e.g., center, top-right).
buttons: Array of button objects for actions:
- label: Button text.
- color: Background color of the button.
- action: Function called when the button is clicked.
autoClose: Closes alert automatically after specified autoCloseDuration.
enableAnimation: Enables animations.
animationType: Animation style (e.g., fade, slide, zoom).
showCloseButton: Displays a close "X" button in the corner.
customStyles: Allows you to apply CSS styling to individual components within the alert (e.g., modal, title, image, message, button).

Toast Notifications

Use the toast function to create brief notifications with options for colors, duration, and animations.

Simple Toast

toast('This is a simple toast notification!');

Customizable Toast with Progress Bar and Close Button

toast('Customizable toast message!', {
  duration: 5000,
  backgroundColor: '#6366f1',
  textColor: '#ffffff',
  position: 'bottom-right',
  closeButton: true,
  progressBar: true,
  progressBarColor: '#10b981',
  customStyles: {
    toast: { borderRadius: "10px" }
  }
});

Options Reference: `toast`

message: Main text in the toast notification.
duration: Duration in milliseconds before toast auto-closes.
backgroundColor: Background color for the toast.
textColor: Text color.
borderRadius: Rounds toast corners.
progressBar: Shows a progress bar when true.
progressBarColor: Color for the progress bar.
position: Screen position for the toast (e.g., top-left, bottom-center).
enableAnimation: Enables entry animation if true.
animationType: Sets animation style (fade, slide, zoom).
closeButton: Displays a close button if set to true.
customStyles: Allows specific CSS for toast components, e.g., toast, progressBar.