Basic Alert Bar Plugin For jQuery - newAlert

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.

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.

  • Publication date: 29.03.2019
  • Source