Custom Notification Messages In jQuery - ggFeedbackMessages

Custom Notification Messages In jQuery - ggFeedbackMessages

ggFeedbackMessages is a small yet highly customizable jQuery notificaiton plugin that shows notification popups of various types (info, success, warning, danger) to end users.

The notification icon is based on Bootstrap GLYPHICONS. Licensed under the GPL 3.0.

1. To get started, add references to jQuery library and the ggFeedbackMessages plugin's files.

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

2. The JavaScript to create a default notification message with custom text that will auto hide after 10 seconds just like a toast.

$("body").ggFeedbackMessage({
  title: "Notification Title",// required
  text: "Notification Message"
});

3. Change the default notification type.

$("body").ggFeedbackMessage({
  title: "Notification Title",// required
  text: "Notification Message",
  type: "info",// or success, warning, danger
});

4. Set the duration of the notification message.

$("body").ggFeedbackMessage({
  title: "Notification Title",// required
  text: "Notification Message",
  duration: 5000 // default: 100000
});

5. Set the time to wait before displaying the notification message.

$("body").ggFeedbackMessage({
  title: "Notification Title",// required
  text: "Notification Message",
  delay: 0 // default: 1000
});

6. Specify the duration of fade in/out animations.

$("body").ggFeedbackMessage({
  title: "Notification Title",// required
  text: "Notification Message",
  animationInDuration: 2000,// default: 1000
  animationOutDuration: 1000 // default: 700
});

7. Add an extra CSS class to the notificaiton message. Ideal for creating your own type/

$("body").ggFeedbackMessage({
  title: "Notification Title",// required
  text: "Notification Message",
  customClasses: "myClass"
});

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

  • Publication date: 19.09.2018
  • Source