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>
<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/>
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: true,
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">×</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 ==...