Auto Dismiss Bootstrap Alert Plugin With jQuery

File Size: 5.05 KB
Views Total: 14158
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Auto Dismiss Bootstrap Alert Plugin With jQuery

A minimalist jQuery plugin to enhance the default Bootstrap alert component that allows to automatically dismiss alert messages after a specific timeout.

How to use it:

1. Insert the JavaScript file bootstrap-auto-dismiss-alert.js into your Bootstrap project.

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-auto-dismiss-alert.js"></script>

2. Add the data-auto-dismiss attribute to the target alert message that will auto close after 5 seconds (5000ms).

<div class="alert alert-warning alert-dismissible fade in" data-auto-dismiss role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Warning message here
</div>

3. Override the default timeout in milliseconds as this:

<div class="alert alert-success" role="alert" data-auto-dismiss="2000">
  simple success example
</div>

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