Elegant Sliding Notification Plugin - jQuery myAlert.js

myAlert.js is a lightweight notification library for jQuery that makes it easier to create elegant, sliding, customizable notifications and alerts on the page.

Key features:

• 5 built-in themes.
• Easy to create your own theme styles.
• Supports html content.
• Automatically fades out after a timeout. Similar to the toast message.
• Slides out from the edge of the screen. Similar to the growl notification.
• Also allows the user to dismiss the notification by clicing on the close button.

How to use it:

1. Load the core stylesheet and theme CSS in the head section of the document.

<link rel="stylesheet" href="css/myalert.min.css">
<link rel="stylesheet" href="css/myalert-theme.min.css">

2. Load the jQuery library and jQuery myAlert.js script at the end of the document so the page loads faster.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="js/myalert.min.js"></script>

3. Add the data-myalert attribute to the container element in which the notifications & alerts should appear.

<div id="main" data-myalert>
  ...
</div>

4. Determine the max number of notifications & alerts to display at a time.

<div id="main" 
     data-myalert
     data-myalert-max="5">
  ...
</div>

5. Create notifications & alerts with built in themes.

// default theme
myAlert("This is a <i>default</i> alert");

// info theme
myAlert("This is an <i>info</i> alert", "myalert-info");

// success theme
myAlert("This is an <i>success</i> alert", "myalert-success");

// warning theme
myAlert("This is an <i>warning</i> alert", "myalert-warning");

// danger theme
myAlert("This is a <i>danger</i> alert", "myalert-danger");

6. Create notifications & alerts with custom styles.

myAlert("This is a <i>custom</i> alert", "myalert-custom");

.myalert-custom {
  /* your own styles here */
}

.myalert-custom:before {
  /* your own styles here */
}

7. The plugin also allows you to create a loading alert with the myAlertSaving API.

// loading indicator
myAlertSaving(true, "Wait, loading...", "myalert-info");

// close the loading indicator
myAlertSaving(false);

---

This awesome jQuery plugin is developed by spacedog4. For more Advanced Usages, please check the demo page or visit the official website.