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:

2020-08-14

• v1.0.8

2020-03-17

• v1.0.7

2019-05-23

• v1.0.5: Support Msg.iconEnabled & extraClass

2019-05-03

• v1.0.3: Fix issue related to jquery external

2019-04-25

• v1.0.2: Fix index.js

2019-04-23

• v1.0.1: Remove unnecessary "\n" and spaces in js

2019-04-18

• v1.0.0: Add progress bar and custom icons

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.