Custom Notification Messages In jQuery - ggFeedbackMessages

ggFeedbackMessages is a small yet highly customizable jQuery notification 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.

How to use it:

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"
});

8. Add custom links to the notification.

$("body").ggFeedbackMessage({
  redirect: [{// internal links of message
      title: "website",// link title
      url: "http://www.ggaritaj.com/",// link url to redirect
      target: "_blank"// target attribute in a tag
  },
  {
      title: "github",
      url: "https://www.github.com/GGaritaJ/",
      target: "_blank"
  }],
});

9. Add a prompt input to the notification.

$("body").ggFeedbackMessage({
  // images, lists, inputs, video or jquery selector
  objects: $("<input type='text' class='form-control' placeholder='type here...' />")
});

Changelog:

2018-09-24

• Add new features

---

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