Growl-style Alert Box Plugin With jQuery - Alert.js

Alert.js is a tiny jQuery plugin for creating OS X inspired growl notifications that auto dismiss after 5 seconds.

These notifications can be used to show alerts, warnings, and notifications of any type and make sure you don’t have to cover your beautifully designed page with ugly alert boxes.

How to use it:

1. Load the main script alert.js after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/alert.js"></script>

2. Set the styles of the alert container.

.alert-container {
  position: fixed;
  top: 30px;
  width: 50%;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  right: 10px;
}

@media only screen and (min-width: 600px) {
  .alert-container {
    width: 400px;
  }
}

3. The necessary CSS styles for the alert boxes.

.modal-alert {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  display: none;
  padding: 20px 15px;
  border-radius: 8px;
  position: relative;
}

.modal-alert .content {
  display: flex;
  align-items: center;
}

.modal-alert .content svg {
  opacity: 0.9;
  margin: 0 10px;
}

.modal-alert h6 {
  opacity: 0.9;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}

.modal-alert .bar {
  height: 2px;
  left: 8px;
  bottom: 0px;
  background: rgb(255, 231, 15);
  position: absolute;
  border-radius: 4px 4px 0 0;
}

.progress {
  animation: alertProgress 5s ease;
}

@keyframes alertProgress {
  from {
      width: 90%;
  }
  to {
      width: 0;
  }
}

4. Display an INFORMATION alert box.

triggerAlert('This is an INFO notification');

5. Display an ERROR alert box.

triggerAlert('This is an ERROR notification', 'error');

6. Display a SUCCESS alert box.

triggerAlert('This is a SUCCESS notification', 'success');

---

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