Bootstrap Notify

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div>
<script>
$.notify({
	// options
	message: 'Hello World' 
},{
	// settings
	type: 'danger'
});
</script>
</div>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>
<p>Something</p>
<br/>

CSS

@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
   ...

JavaScript

/*
* Project: Bootstrap Notify = v3.1.3
* Description: Turns standard Bootstrap alerts into "Growl-like" notifications.
* Author: Mouse0270 aka Robert McIntosh
* License: MIT License
* Website: https://github.com/mouse0270/bootstrap-growl
*/
(function (factory) {
	if (typeof define === 'function' && define.amd) {
		// AMD. Register as an anonymous module.
		define(['jquery'], factory);
	} else if (typeof exports === 'object') {
		// Node/CommonJS
		factory(require('jquery'));
	} else {
		// Browser globals
		factory(jQuery);
	}
}(function ($) {
	// Create the defaults once
	var defaults = {
			element: 'body',
			position: null,
			type: "info",
			allow_dismiss: true,
			newest_on_top: false,
			showProgressbar: false,
			placement: {
				from: "top",
				align: "right"
			},
			offset: 20,
			spacing: 10,
			z_index: 2031,
			delay: 5000,
			timer: 1000,
			url_target: '_blank',
			mouse_over: null,
			animate: {
				enter: 'animated fadeInDown',
				exit: 'animated fadeOutUp'
			},
			onShow: null,
			onShown: null,
			onClose: null,
			onClosed: null,
			icon_type: 'class',
			template: '<div data-notify="container" class="col-xs-11 col-sm-11 alert alert-{0}" role="alert"><button type="button" aria-hidden="true" class="close" data-notify="dismiss">&times;</button><span data-notify="icon"></span> <span data-notify="title">{1}</span> <span data-notify="message">{2}</span><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>'
		};

	String.format = function() {
		var str = arguments[0];
		for (var i = 1; i < arguments.length; i++) {
			str = str.replace(RegExp("\\{" + (i - 1) + "\\}", "gm"), arguments[i]);
		}
		return str;
	};

	function Notify ( element, content, options ) {
		// Setup Content of Notify
		var content = {
			content: {
				message: typeof content ==...