<button class="btn btn-danger" id="growlError" title="Press enter to view Error Notification."><i class="fa fa-plus"></i> Error Notification</button>
            

<button class="btn btn-warning" id="growlWarning" title="Press enter to view Warning Notification."><i class="fa fa-plus"></i> Warning Notification</button>
            

<button class="btn btn-danger" id="growlAlert" title="Press enter to view Alert Notification."><i class="fa fa-plus"></i> Alert Notification</button>
            

$(function() {
    // Alert growl-alerts
    // Documentation can be found at
    // http://bootstrap-growl.remabledesigns.com/
    var growlDefaults = {
        // settings go here
        delay: '10000',
        type: 'custom basic', // ie custom basic (no icon), custom warning, custom success, custom info, custom danger || you can use bootstraps default alert classes such as warning, success, info or danger
        placement: { // notification placement settings
            from: 'top', // ie, top, bottom
            align: 'right' // ie, left, center, right
        },
        animate: { // optional - animate notification
            // Using Animate.css
            // Documentation can be found at:
            // https://daneden.github.io/animate.css/
            enter: 'animated bounceIn',
            exit: 'animated bounceOut'
        },
        template:
            '<div data-notify="container" class="growl-alert growl-alert-user col-xs-11 col-sm-3 alert alert-{0}" role="alert">' +
            '   <div class="alert-content">' +
            '       <span data-notify="icon"></span>' +
            '       <span class="notify-message">'+
            '           <span data-notify="title">{1}</span>' +
            '           <span data-notify="message">{2}</span>'+
            '       </span>' +
            '       <button type="button" class="close" data-notify="dismiss" title="Press enter to close the alert, or wait ten seconds for autodismissal"><i class="fa fa-times"></i></button>' +
            '       <div class="progress" data-notify="progressbar">' +
            '           <div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
            '       </div>' +
            '       <a href="{3}" target="{4}" data-notify="url"></a>' +
            '   </div>' +
            '</div>',
        onShown: function(){
            // focus growl alert so screen reader reads it.
            $(this).focus();
        },
        onClosed : function(){
            // focus wherever you'd like to focus within this function
        }
    };

    $('#growlBanner').click(function() {
        var opener = $(this);
        var args = $.extend({}, growlDefaults, {type:'custom success',onClosed:function(){opener.focus();}});
        $.notify({
            // options go here
            title: 'Notification title goes here...', // optional title
            message: "Notification message goes here lorem ipsum dolor sit amet" // required message
        }, args);
    });

    $('#growlError').click(function() {
        var opener = $(this);
        var args = $.extend({}, growlDefaults, {delay:'0', type:'custom danger',onClosed:function(){opener.focus();}});
        $.notify({
            // options go here
            icon: 'fa fa-birthday-cake', // optional font-icon
            title: 'Notification title goes here...', // optional title
            message: "Notification message goes here lorem ipsum dolor sit amet" // required message
        }, args);
    });

    $('#growlWarning').click(function() {
        var opener = $(this);
        var args = $.extend({}, growlDefaults, {delay:'0', type:'custom warning',onClosed:function(){opener.focus();}});
        $.notify({
            // options go here
            title: 'Notification title goes here...', // optional title
            message: "Notification message goes here lorem ipsum dolor sit amet" // required message
        }, args);
    });

    $('#growlAlert').click(function() {
        var opener = $(this);
        var args = $.extend({}, growlDefaults, {delay:'0', type:'custom info',onClosed:function(){opener.focus();}});
        $.notify({
            // options go here
            title: 'Notification title goes here...', // optional title
            message: "Notification message goes here lorem ipsum dolor sit amet" // required message
        }, args);
    });
});