Dismissible Alerts with Sass, JavaScript and jQuery

Dismissible alerts are a common sight in today’s web applications. They are great for providing quick feedback to users. They are also useful for showing announcements.

In this tutorial we will build a reusable JavaScript Utility for simple dismissible alerts.

Requirements:

  1. Alerts should be customized based on context
  2. Alerts should fade out when visitor clicks on the close button
  3. We need to have multiple alerts visible at the same time

Alerts HTML

The HTML will be pretty simple. Just a div with some content.

We add some additional context and flair with a font awesome icon.

<div class="dismissible-alert success">
    <button class="close">x</button>
    <h1 class="header"><i class="fa fa-thumbs-up"></i>Your Transaction Was Successful</h1>
    <p>Thank you for your purchase</p>
    <a href="products.html">Continue Shopping</a>
</div>

Alerts Sass/CSS

Since we want our alerts to look different based on context, we will use sass mixins to create many alert styles without repeating code.

First, we need to create our color variables. This way you can change alert colors quickly.

$danger-color: #f7322f; // red
$warning-color: #D1CB34; // yellow
$success-color: #7aba7b; // green
$info-color: #1DAAF0; // blue
$muted-color: #ccc; // light grey

So we can generate different alerts types more easily we will create a Sass Mixin (if you are unfamiliar with Sass it is an amazing tool – Learn More About Sass).

This mixin creates a nicley styled box with a color of your choice, optional rounded corners, and an optional close button. You can choose to base the color of the box on context or create a custom box with any color you want. We will go into more detail when we write the Sass to generate the alert class styles.

@mixin context-box($type: info, $border-radius: 0, $color: none) {
    padding: 10px 20px 10px 20px;
    width: 95%;
    margin: 20px 2.5% 20px 2.5%;
    position: relative;
    box-sizing: border-box;
    
    &:after, &:before {
        content: "";
        display: table;
    }

    &:after {
        clear: both;
    }

    .close {
        margin: 0;
        padding: 0;
        position: absolute;
        right: 5px;
        top: 3px;
        border: none;
        background: none;
        transition: color, .3s, ease-out;
        width: 20px;
        height: 20px;
        font-size: (14em / 16);

        &:hover {
            color: white;
            cursor: pointer;
            transition: color, .3s, ease-in;
        }
    }

    @if $border-radius != 0 {
        border-radius: $border-radius;
    }

    @if $type == info {
        background-color: lighten($info-color, 20%);
        border: 1px solid $info-color;
        color: darken($info-color, 20%);

        a {
            color: darken($info-color, 20%);
        }

        .close {
            color: $info-color;
        }

    } @else if $type == danger {
        background-color: lighten($danger-color, 20%);
        border: 1px solid $danger-color;
        color: darken($danger-color, 20%);

        a {
            color: darken($danger-color, 20%);
        }

        .close {
            color: $danger-color;
        }

    } @else if $type == warning {
        background-color: lighten($warning-color, 20%);
        border: 1px solid $warning-color;
        color: darken($warning-color, 20%);

        a {
            color: darken($warning-color, 20%);
        }

        .close {
            color: $warning-color;
        }   

    } @else if $type == success {
        background-color: lighten($success-color, 20%);
        border: 1px solid $success-color;
        color: darken($success-color, 20%);

        a {
            color: darken($success-color, 20%);
        }

        .close {
            color: $success-color;
        }   

    } @else if $type == muted {
        background-color: lighten($muted-color, 10%);
        border: 1px solid $muted-color;
        color: darken($muted-color, 20%);

        a {
            color: darken($muted-color, 20%);
        }

        .close {
            color: $muted-color;
        }   

    } @else if $type == custom {
        background-color: lighten($color, 20%);
        border: 1px solid $color;
        color: darken($color, 20%);

        a {
            color: darken($color, 20%);
        }

        .close {
            color: $color;
        }   

    } @else {
        @warn "#{error("That's not a context box type!")}";
    }
}

Now its time to create the Sass for the actual alerts. First we will create a class for a generic alert. Our mixin doesn’t take care of styling the inner content so we still need to add some style rules.

.dismissible-alert {
    margin: 10px auto;
    width: 60%;

    h1 {
        margin: 0;
        padding: 0 0 0 10px;
        text-align: left;
        float: left;
        font-size: (28em / 16);
    }

    p {
        margin: 0;
        padding: 0 0 10px 0;
        font-size: (14em / 16);
    }

    a {
        margin: 0;
        padding: 0;
        font-size: (14em / 16);
    }

    .header {
        padding: 0 0 10px 0;

        &:after, &:before {
            content: "";
            display: table;
        }

        &:after {
            clear: both;
        }

        i {
            display: block;
            position: relative;
            float: left;
            padding: 0;
            font-size: (30em / 16);
        }
    }
}

Next we will apply our mixin to create our alert context class. This styles the alert based on its context. For example, we want our alerts to be a reddish color if there is an error and green if an operation is successful.

.information-alert {
    @include drm-context-box(info, 3px);
}

.danger-alert {
    @include drm-context-box(danger, 3px);
}

.warning-alert {
    @include drm-context-box(warning, 3px);
}

.success-alert {
    @include drm-context-box(success, 3px);
}

.muted-alert {
    @include drm-context-box(muted, 3px);
}

We provide the alert type as the context and add a slight rounding to the corners of our box.

Alerts JavaScript

Here we will add our script to allow the alert to fade out when the close button is clicked.

(function($) {
    $('body').on('click', '.dismissible-alert button.close', function() {
        $(this).parent().fadeOut(300, function() {
            $(this).remove();
        });
    });
})(jQuery);

This is a very simple jQuery event. Basically all we need to do is fade out the parent (alert) of the close button.

Right now the alerts will reappear when someone refreshes the page. You may want to add some logic to allow the page to remember if the user hid the alerts so they don’t have to hide them over and over.

I hope this tutorial was enjoyable and helpful. Look for upcoming JavaScript UI element tutorials.