Sliding Top Notification Plugin - jQuery Myalert

Myalert is a jQuery notification plugin for creating animated, sticky, auto-dismissable top notification bars that use Bootstrap's Background Color CSS utilities by default.

How to use it:

1. Load the Myalert's stylesheet and Bootstrap's CSS (OPTIONAL) in the header.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<link rel="stylesheet" href="/path/to/css/myalert.css" />

2. Load jQuery library and the Myalert's JavaScript right before the </body> tag.

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

3. Insert your own message to the notification bar.

Myalert({
  message: "Hello World!"
});

4. Determine the notification type:

• info
• warning
• danger
• success

Myalert({
  message: "Hello World!",
  type: 'success'
});

5. Create your own notification styles if you don't want to use Bootstrap.

.bg-success {
  /* success styles here */
} 

.bg-danger {
  /* danger styles here */
} 

.bg-warning {
  /* warning styles here */
} 

.bg-info {
  /* info styles here */
} 

.bg-dark  {
  /* default styles here */
} 

6. Set the duration of the notification bar, meaning it will automatically dismiss itself after this timeout:

Myalert({
  message: "Hello World!",
  timeout:2000
});

7. Customize the animation speed:

Myalert({
  slideDown:500,
  slideUp:500
});

---

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