Bootstrap toast notifications with jQuery.toast

#toast-container {
    display: block;
    position: fixed;
    top: 10%;
    right: 8%;
    z-index: 10000;
}
@media (max-width: 576px) {
    #toast-container {
        margin-left: 8%;
    }
}
.toast {
    border-radius: 2px;
    top: 35px;
    display: none;
    width: auto;
    margin-top: 10px;
    position: relative;
    max-width: 100%;
    height: auto;
    min-height: 48px;
    min-width: 200px;
    line-height: 1.5em;
    word-break: break-all;
    background-color: #323232;
    padding: 10px 15px;
    font-size: 15px;
    font-weight: 300;
    color: #fff;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.toast .close {
    margin-left: 10px;
}
.toast .toast-heading {
    color: inherit;
    font-weight: 500;
}
.toast.toast-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.toast.toast-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.toast.toast-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
.toast.toast-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}
.toast.toast-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

///
// Roger Thomas
//
// jQuery.toast
//        <div class="toast toast-success" id="toastAsdfnk234rnosdf">
//            <button type="button" class="close" data-dismiss="toastAsdfnk234rnosdf" aria-label="Close">
//                <span aria-hidden="true">&times;</span>
//            </button>
//            <div class="toast-heading">This is the title</div>
//            <div class="tost-body">The quick brown fox jumped over the lazy dog.</div>
//        </div>
jQuery.extend({
    toast: function(config, ttl) {
        if ($('#toast-container').length < 1) {
            $('body').append('<div id="toast-container" />');
        }
        if (typeof config == 'string') {
            config = {
                message: config
            };
        }

        var defaults = {
            ttl: Infinity,
            title: null,
            message: null,
            type: 'toast-success',
            close: true
        };
        for (var n in config){
            defaults[n]=config[n];
        }
        if (defaults['message'] === null) {
            return;
        }

        var getName = function() {
            var text = "";
            var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
            for (var i = 0; i < 24; i++)
            text += possible.charAt(Math.floor(Math.random() * possible.length));
            return text;
        };
        var closeToast = function(name) {
            var sel = $('.toast#' + name);
            if (sel.length > 0) {
                sel.remove();
            }
        };

        var selector = $('#toast-container');
        var name = 'toast' + getName();
        var elem = $('<div />').attr('id', name).addClass('toast').addClass(defaults['type']);
        if (defaults['close'] === true) {
            elem.attr('style', 'padding-right:10px;');
            elem.append(
                $('<button />').attr('type', 'button').addClass('close toast-close').attr('data-dismiss', name).attr('aria-label', 'Close').html(
                    $('<span />').attr('aria-hidden', 'true').html('&times;')
                )
            )
        }
        if (defaults['title'] !== null) {
            elem.append(
                $('<div />').addClass('toast-heading').html(defaults['title'])
            )
        }
        if (defaults['message'] !== null) {
            elem.append(
                $('<div />').addClass('toast-body').html(defaults['message'])
            )
        }
        selector.append(elem);
        $('.toast#' + name).fadeIn(function(){
            if (defaults['close'] === true) {
                $('.toast-close[data-dismiss="' + name + '"]').on('click', function(e){
                    e.preventDefault();
                    closeToast($(this).attr('data-dismiss'))
                });
            }
            if (defaults['ttl'] !== Infinity) {
                setTimeout(function(){
                    closeToast(name);
                }, defaults['ttl']);
            }
        })
        return this;
    }
});

<script>
    jQuery.toast(
        {
            title: "Attention required",
            message: "OK, great"
        }
    );
    jQuery.toast(
        {
            title: "Attention required",
            message: "OK, great",
            type: 'toast-danger'
        }
    );
    jQuery.toast(
        {
            title: "Attention required",
            message: "OK, great",
            type: 'toast-info'
        }
    );
    jQuery.toast(
        {
            title: "Attention required",
            message: "OK, great",
            type: 'toast-primary'
        }
    );
    jQuery.toast(
        {
            title: "Attention required",
            message: "OK, great",
            type: 'toast-warning'
        }
    );
</script>