Lightweight Bootstrap Alert Overlay Plugin With jQuery

Twbs Alert Overlay is a very small jQuery plugin to extend/manage the Bootstrap alerts component that helps you create dynamic Bootstrap alert messages with a background overlay.

How to use it:

1. Download and load the Twbs Alert Overlay plugin's files in the Bootstrap project.

<!-- Stylesheet -->
<link rel="stylesheet" href="bootstrap.min.css">
<link href="jquery.twbs-alert-overlay.min.css" rel="stylesheet">
<!-- JavaScript -->
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="jquery.twbs-alert-overlay.min.js"></script>

2. The JavaScript to various types of alert messages as these:

$.twbsAlertOverlay({
  messages:
  [
    {type: 'success', content: 'Success Message'},
    {type: 'warning', content: '<p>HTML Content</p>'},
    {type: 'info', content: 'Information Message'},
    {type: 'danger', content: 'Danger Message'}
  ]
})

3. Customize the alert overlay.

$.twbsAlertOverlay({
  messages:
  [
    {type: 'success', content: 'Success Message'},
    {type: 'warning', content: '<p>HTML Content</p>'},
    {type: 'info', content: 'Information Message'}
    {type: 'danger', content: 'Danger Message'}
  ],
  overlay: "#alert-overlay", 
  overlayAuto: true, // show/hide overlay
})

Change log:

2017-05-29

• Added 'z-index' to avoid problems with bootstrap's active buttons.

---

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