Minimal Notification Plugin With jQuery and Bootstrap - Bootstrap Msg

Minimal Notification Plugin With jQuery and Bootstrap - Bootstrap Msg

Bootstrap Msg is a tiny jQuery plugin which displays flexible alert / feedback messages using Bootstrap's alerts component.

How to use it:

1. Add jQuery library, Bootstrap framework and the jQuery Bootstrap Msg plugin into your webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/js/bootstrap-msg.min.js"></script>

2. Show a basic notification message on the webpage.

  • message: The message content
  • type: The type of message. Can be 'success', 'info', 'warning' and 'danger'.
  • timeout: The duration of message. Default is 3000 (ms)
Msg.show(message, type, timeout);
// or
Msg.info('info message', timeout);
Msg.success('success message', timeout);
Msg.warning('warning message', timeout);
Msg.error('error message', timeout);
Msg.danger('danger message', timeout);

3. Style the notification messages whatever you like.

#msg {
  position: fixed;
  opacity: 0;
  filter: alpha(opacity=0);
  width: 400px;
  top: -300px;
  left: 50%;
  margin-left: -200px;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
  -o-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
  transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
}
#msg i {
  font-size: 20px;
  vertical-align: middle;
}
#msg span { font-size: 15px; }
#msg.showed {
  top: 50px;
  opacity: 1;
  filter: alpha(opacity=100);
}
@media (min-width: 1200px) {
#msg {
  width: 600px;
  margin-left: -300px;
}
}
@media (max-width: 479px) {
#msg {
  width: 300px;
  margin-left: -150px;
}
}

4. Use Font Awesome 4 icons instead of Bootstrap's Glyphicons.

Msg.icon = {    
    info: 'fa fa-bath',
    success: 'fa fa-anchor',
    error: 'fa fa-close',
    warning: 'fa fa-bell-o',
    danger: 'fa fa-bolt'  
};

Changelog:

2019-04-18

  • v1.0.0

2016-01-24

  • v0.4.0

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

  • Publication date: 18.04.2019
  • Source