Basic Alert Bar Plugin For jQuery - newAlert

File Size: 4.4 KB
Views Total: 681
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Basic Alert Bar Plugin For jQuery - newAlert

newAlert is a dead simple jQuery notification script that helps you create temporary top alert bar using JavaScript and Font Awesome iconic font.

How to use it:

1. Load the jQuery, newAlert.css, and newAlert.js in the html file.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<!-- newAlert JS -->
<script src="./js/newAlert.js"></script>
<!-- newAlert CSS -->
<link rel="stylesheet" href="./css/newAlert.css">

2. Load the latest Font Awesome iconic font for alert icons.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

3. Code the HTML for the top alert bar.

<div id="alertDIV">
  <div id="content">
    <span id="icon"></span>
    <span id="text"></span>
    <span id="close" onclick="closeAlert()"><i class="fas fa-times"></i></span>
  </div>
</div>

4. Create a top alert bar with the following parameters:

  • icon: icon name (check, exclamation, triangle, exclamation-c, bell, bell-slash, block, comment, commments, times)
  • type: notification type (warning, danger, success, grey, dark)
  • text: notification message
  • time: timeout in milliseconds
  • dismiss: shows
newAlert(icon, type, text, time, dismiss)

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