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.

bootstrap message box, bootstrap alert popup, bootstrap success message popup, bootstrap alert message, bootstrap 4 alert popup, bootstrap alert example

How to make use of it:

1. Add 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 fundamental 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 no matter what you want.

#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

NameParams (ParamType: ParamName)Description
Msg.showString: type
String: message
Number: timeout
Show message. type can be infosuccesswarning or danger. If timeout is not set, will use the default timeout
Msg.infoString: message
Number: timeout
Shortcut of showMessage with type is info
Msg.successString: message
Number: timeout
Shortcut of showMessage with type is success
Msg.warningString: message
Number: timeout
Shortcut of showMessage with type is warning
Msg.errorString: message
Number: timeout
Alias of Msg.danger
Msg.dangerString: message
Number: timeout
Shortcut of showMessage with type is danger

Minimal Notification Plugin With jQuery and Bootstrap, Bootstrap Notification Bar, bootstrap 5 alert


See Demo And Download

Official Website(ducdhm): Click Here

This superior jQuery/javascript plugin is developed by ducdhm. For extra Advanced Usage, please go to the official website.

Share