Bootstrap Advanced Alert

Basic usage

Working in the same way as the standard alert component.

<div class="alert alert-warning in">
    <a href="#" class="close" data-dismiss="aalert">&times;</a>
    <div class="alert-content">
        <strong>Warning!</strong> There was a problem.
    </div>
</div>

Adding open and close effects.

You can add open and close effects the same as the standard component. The available effects are slide and fade, classes can be added to the alert component to apply the effects. If no class is added the alert will just hide.

<div class="alert alert-success slide in">
    <a href="#" class="close" data-dismiss="aalert">&times;</a>
    <div class="alert-content">
        <strong>Success!</strong> Well done.
    </div>
</div>

<div class="alert alert-info fade in">
    <a href="#" class="close" data-dismiss="aalert">&times;</a>
    <div class="alert-content">
        <strong>Info!</strong> This is some info.
    </div>
</div>

Timeout

You can add a data-timeout attribute to close the alert after a set amount of time set in milliseconds.

<div class="alert alert-info fade in" data-timeout="1000">
    <a href="#" class="close" data-dismiss="aalert">&times;</a>
    <div class="alert-content">
        <strong>Info!</strong> This is some info.
    </div>
</div>

The above sample will close after 1 second

jQuery extension api

changeTo

This will change the alert style. The below snippet with change the alert- class to alert-error.

$('my-alert').aalert('changeTo', 'error');

changeContentTo

The will change the content of the alert. The function takes a optional second parameter open. This will open the alert after the content has been changed and is true by default.

$('.my-alert').aalert('changeContentTo', 'Some new content', false);

closeAfter

This will close the alert after the specified time

$('my-alert').aalert('closeAfter', 2000);

toggle

$('my-alert').aalert('toggle');

close

$('my-alert').aalert('close');

open

$('my-alert').aalert('open');

Changing functions

$('.my-alert')
    .aalert('changeTo', 'success')
    .aalert('changeContentTo', 'Success message')
    .aalert('closeAfter', 3000);