Bootstrap Notification Message Alert Plugin with jQuery

BootstrapMsg is a jQuery plugin for displaying messages with Bootstrap alert classes to generate hierarchical in-page navigation for an extended webpage sectioned by heading components.

Table of Contents

Using Bootstrap icon

We have already defined the Bootstrap icon set for BootstrapMsg in Msg.ICON.BOOTSTRAP. To use this set of icons, you only need Msg.icon = Msg.ICONS.BOOTSTRAP;

Hide Icon

If you don’t want to show the icon in BootstrapMsg, you can set Msg.iconEnabled = false;

Extra class

If you want to add an extra class to BootstrapMsg element just change Msg.extraClass to default, extra class.

Must Read: JavaScript Library for Simple and Lightweight Toast Popups | EggyJS

How to make use of it:

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

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

2. Show a notification message on the webpage.

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.

#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'  
};

Methods

Must Read: Light, Easy and Beautiful Toast Notification Library | Vue Toastification

Name	Params (ParamType: ParamName)	Description
Msg.show	String: type String: message Number: timeout	Show message. `type` can be `info`, `success`, `warning` or `danger`. If `timeout` is not set, will use the default timeout
Msg.info	String: message Number: timeout	Shortcut of `showMessage` with `type` is `info`
Msg.success	String: message Number: timeout	Shortcut of `showMessage` with `type` is `success`
Msg.warning	String: message Number: timeout	Shortcut of `showMessage` with `type` is `warning`
Msg.error	String: message Number: timeout	Alias of `Msg.danger`
Msg.danger	String: message Number: timeout	Shortcut of `showMessage` with `type` is `danger`