Growl Notification Plugin For Bootstrap 4 - jQuery notifyMessage

Growl Notification Plugin For Bootstrap 4 - jQuery notifyMessage
File Size: 14.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

notifyMessage is a simple, lightweight jQuery plugin used to create growl-style sliding notification messages using Bootstrap 4 alert component.

How to use it:

1. Make sure you have jQuery library and Bootstrap 4 framework loaded properly in the document. Note that the plugin uses jQuery's animate method for the sliding animation, so you can not import the slim version of jQuery.

<!-- Stylesheet -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

2. Load the jQuery notifyMessage plugin's files.

<!-- Stylesheet -->
<link rel="stylesheet" href="css/notifyMessage.css">
<!-- JavaScript -->
<script src="js/notifyMessage.js"></script>

3. Display a default notification message on the page that automatically slides out after 3 seconds.

runNotify({
  message: 'This is a notification message',
  messageTitle: 'Message title'
});

4. Specify the timer in milliseconds for the timeout. In this example, the notification message will automatically dismiss after 5 seconds.

runNotify({
  message: 'This is a notification message',
  timer: '5000'
});

5. You can also create a 'Sticky' notification message that is always visible until you click the close button.

runNotify({
  message: 'This is a notification message',
  type: 'fixed'
});

6. The plugin uses Bootstrap 4's contextual classes for the notification types.

runNotify({
  message: 'Success message',
  levelMessage: 'success'
});

runNotify({
  message: 'Error message',
  levelMessage: 'error'
});

runNotify({
  message: 'Warning message',
  levelMessage: 'warning'
});

7. Uses the 'Read More' mode to open the full notification message in a modal window.

runNotify({
  type: 'readmore',
  messageTitle: 'Message title',
  message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
});

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