A CodePen by T.J. Fogarty. Notify - A simple little notification system that will let you define a success or an error, so you can hook in with CSS and style accordingly.

notifications-demo.html

<a href="#" class='notify'>Success!</a>

<a href="#" class='notify error'>Error :(</a>

script.js

// Notify.js
// lightweight notification/alert system
var Notify = {
    container: null,
    title: null,
    message: null,
    close: null,
    page: $('body'),
    isClosedByUser: false,
    showTime: 3000, // determines how long notification should be visible for
    showTimer: null,

    showTimeout: function () {
        return setTimeout(function () {
            _n.events.hide();
        }, _n.showTime);
    },


    init: function () {
        _n.page.append('<div class=notification><h5></h5><p></p> <a class="close" href="#">&times;</a></div>');
        _n.container = $('.notification');
        _n.title = _n.container.find('h5');
        _n.message = _n.container.find('p');
        _n.close = _n.container.find('.close');

        // when you hover over the notification, clear the timeout,
        // then set it again when they mouse out
        _n.container.mouseenter(_n.events.hoverStart)
            .mouseleave(_n.events.hoverFinish);

        _n.close.on('click', _n.events.hide);
    },

    events: {
        show: function (success, title, message) {

            if (_n.showTimer != null) {
                clearTimeout(_n.showTimer);
            }
            _n.isClosedByUser = true;
            _n.title.html(title);
            _n.message.html(message);
            if (success) {
                _n.container.removeClass('error')
                    .addClass('success');
            } else {
                _n.container.removeClass('success')
                    .addClass('error');
            }
            _n.container.addClass('is-visible');

            //hide after Notify.showTime seconds
            _n.showTimer = _n.showTimeout();
        },

        hide: function (e) {
            // check if the user clicked the close button
            if (typeof e != 'undefined') {
                e.preventDefault();
                isClosedByUser = true;
            } else {
                isClosedByUser = false;
            }

            _n.container.removeClass('is-visible');
            clearTimeout(_n.showTimer);
        },

        hoverStart: function () {
            clearTimeout(_n.showTimer);
        },

        hoverFinish: function () {
            // if the user clicked the close button
            // then we don't restart the timer
            if (!isClosedByUser) {
                _n.showTimer = _n.showTimeout();
            }
        }
    }

},
//shortcut
_n = Notify,
    $notify = $('.notify');

_n.init();

$notify.on('click', function (e) {
    e.preventDefault();
    if ($(this).hasClass('error')) {
        _n.events.show(false, 'Uh oh', 'This is an error D:');
    } else {
        _n.events.show(true, 'Success!', 'Something went right :D');
    }
});

style.css

body {
    font-family: sans-serif;
}
.notify {
    display: block;
    text-decoration: none;
    margin: 40px 0;
    color: #00A300;
    text-align: center;
}
.notify.error {
    color: #8F0000;
}
.notification {
    position: fixed;
    bottom: 0px;
    right: 50px;
    text-align: center;
    color: #fff;
    opacity: 0.7;
    width: 280px;
    height: 0;
    overflow: hidden;
    -webkit-transition: all ease 0.4s;
    -moz-transition: all ease 0.4s;
    -ms-transition: all ease 0.4s;
    -o-transition: all ease 0.4s;
    transition: all ease 0.4s;
}
.notification.is-visible {
    height: 150px;
}
.notification:hover {
    opacity: 1;
}
.notification.success {
    background: #00A300;
}
.notification.error {
    background: #8F0000;
}
.notification .close {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #fff;
    text-decoration: none;
}
.notification h5 {
    margin: 35px 0;
    font-size: 20px;
}
.notification p {
    margin: 20px 0;
    font-size: 12px;
}