Close Menu

simplealert

SimpleAlert is a lightweight JavaScript library that allows you to quickly and easily implement custom alert boxes on your webpages. With SimpleAlert, you can create stylish and customizable alerts to enhance the user experience.

Key Features

  • Create custom alert boxes with ease
  • Customize alert appearance and behavior
  • Set different alert types (success, error, warning)
  • Add custom icons and images to alerts
  • Specify timeout or allow user interaction to dismiss alerts
  • Responsive design for cross-device compatibility

Installation

Follow the steps below to get started with SimpleAlert:

Step 1: Include SimpleAlert Library

To use SimpleAlert, include the following script tag in the <head> section of your HTML page:

<script src="https://example.com/simplealert.js"></script>

Step 2: Add CSS Stylesheet

Add the SimpleAlert CSS stylesheet to ensure proper display and styling of the alerts. Include the following link tag in the <head> section of your HTML page:

<link rel="stylesheet" href="https://example.com/simplealert.css">

Usage

Once you have included the SimpleAlert library and CSS, you can start creating custom alert boxes. Follow these steps:

Step 1: Create Alert Instance

Create an instance of SimpleAlert by calling the SimpleAlert() constructor function. Assign it to a variable for later use:

const myAlert = new SimpleAlert();

Step 2: Display an Alert

Show the alert by calling the myAlert.showAlert() method. Pass in the desired alert text as a parameter:

myAlert.showAlert("This is a simple alert.");

Step 3: Customize Alert Appearance (Optional)

SimpleAlert allows you to customize the appearance of alerts. You can customize the following properties:

Customization Options

  • backgroundColor: Background color of the alert box
  • textColor: Text color of the alert message
  • icon: Custom icon or image URL for the alert
  • type: Alert type (success, error, warning)
  • closeButton: Display a close button

Example: Customization

// Create a customized alert
const myCustomAlert = new SimpleAlert({
  backgroundColor: "#ffcccc",
  textColor: "#ff0000",
  icon: "https://example.com/my-icon.png",
  type: "error",
  closeButton: true,
});

// Show the customized alert
myCustomAlert.showAlert("This is a customized error alert.");

Conclusion

Using SimpleAlert, you can easily implement custom alert boxes on your website to enhance user interaction and provide important information in a visually appealing manner. Enjoy the simplicity and versatility of SimpleAlert for your alert implementation needs!