JSFiddle - React, Tailwind, and code Playground

Tiny Growl for Bootstrap

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container text-center">
    <h1>Tiny Growl for Bootstrap</h1>
    <p class="lead"><a target="_blank" href="https://github.com/ajkochanowicz">Adam Kochanowicz</a></p>
    
    <h4>Sample Alerts</h4>
    <a href="#" class="btn btn-success btn-sm" id="success">Success</a>
    <a href="#" class="btn btn-danger btn-sm" id="error">Error</a>
    <a href="#" class="btn btn-warning btn-sm" id="delay">Delay</a>
    <a href="#" class="btn btn-info btn-sm" id="html">With HTML</a>
    <a href="#" class="btn btn-warning btn-sm" id="overflow">Handling overflow</a>
    <a href="#" class="btn btn-success btn-sm" id="customClass">Custom class</a>
    <a href="#" class="btn btn-info btn-sm" id="custom">Custom Container</a>
    
    <h4>Custom container</h4>
    <div class="customContainer"></div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Dosis);

body {
    font-family:'Dosis', sans-serif;
    color: #4e555f;
    font-size: 16px;
}

.customContainer {
  width: 400px;
  margin: 0 auto;
}
.myStyle { border: 10px solid green; }
.myStyle2 { 
  background: green; 
  color: white;
}

JavaScript

// TinyGrowl

(function ($) {
    $("body").append('<div id="growlContainer" style="position:fixed;width:250px;top:20px;right:20px;overflow:auto;pointer-events:none;"></div>');
    $.extend({
        growl: function (options) {
            var defaults = {
                delay: 0,
                type: "warning",
                container: "#growlContainer",
                text: "",
                "class": ""
            };
            var _ = $.extend(defaults, options);
            _.fTitle = _.title ? "<strong>" + _.title + "</strong>" : "";
            this.id = Math.floor(Math.random() * 1e3);
            this.html = document.createElement("div");
            this.html.className = "growl" + this.id + " alert alert-" + _.type + " " + _.class;
            var xHtml = '<a style="pointer-events: auto;" class="close" data-dismiss="alert" href="#">&times;</a>';
            $(this.html).html((_.delay == 0 ? xHtml : "") + _.fTitle + " " + _.text);
            $(_.container).prepend(this.html);
            if (_.delay > 0) {
                var fn = function (delay, id) {
                    setTimeout(function () {
                        $(".growl" + id).fadeOut()
                    }, delay)
                }(_.delay, this.id)
            }
        }
    })
})(jQuery);

// jQuery Bindings

$('a#success').click(function () {
    $.growl({
        title: 'Success',
        text: 'it worked!',
        type: 'success'
    })
})
$('a#error').click(function () {
    $.growl({
        title: 'Error',
        text: 'it didn\'t work!',
        type: 'danger'
    })
})
$('a#delay').click(function () {
    $.growl({
        title: 'I\'ll hang out',
        text: '...but just for a couple seconds',
        type: 'info',
        delay: 2000
    })
})
$('a#custom').click(function () {
    $.growl({
        title: 'I\'ll hang out',
        text: '...but just for a couple seconds',
        type: 'info',
        delay: 2000,
        container: '.customContainer'
   ...