Download Growl Notification Plugin For Bootstrap 4 – jQuery notifyMessage

This time I will share jQuery Plugin and tutorial about Growl Notification Plugin For Bootstrap 4 – jQuery notifyMessage, hope it will help you in programming stack.

File Size:	14.3 KB
Views Total:	1753
Last Update:	3 years ago
Publish Date:	3 years ago
Official Website:	Go to website
License:	MIT

Demo Download

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.

1
<!-- Stylesheet -->

2
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

3
<!-- JavaScript -->

4
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>

5
<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>

6
<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.

1
<!-- Stylesheet -->

2
<link rel="stylesheet" href="css/notifyMessage.css">

3
<!-- JavaScript -->

4
<script src="js/notifyMessage.js"></script>

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

1
runNotify({

2
  message: 'This is a notification message',

3
  messageTitle: 'Message title'

4
});

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

1
runNotify({

2
  message: 'This is a notification message',

3
  timer: '5000'

4
});

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

1
runNotify({

2
  message: 'This is a notification message',

3
  type: 'fixed'

4
});

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

01
runNotify({

02
  message: 'Success message',

03
  levelMessage: 'success'

04
});

05
 
06
runNotify({

07
  message: 'Error message',

08
  levelMessage: 'error'

09
});

10
 
11
runNotify({

12
  message: 'Warning message',

13
  levelMessage: 'warning'

14
});

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

1
runNotify({

2
  type: 'readmore',

3
  messageTitle: 'Message title',

4
  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.',

5
});

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

source : jquery.net

How to use it:

Share this:

Related posts: