Tiny jQuery Notify (notification bubble/alert) in <1KB

js-notify.js

/*! Tiny jQuery Notify by Xavi Esteve © 2018 MIT */
/*
	{
		text: string
		type: success, error, warning, danger... any CSS class you want to add
	}
  
	notify({text: 'Hello world!', type: 'success' });
*/
var timers = [];
var notify = function( msg ){
  var _notificationTime = 6, // seconds
	  msgId = 'msg-' + (+ new Date());

	if ( $('#alerts').length === 0 ) {
		$('body').append('<div id="alerts" class="alerts"></div>');
	}

	$('#alerts').prepend('<div id="'+ msgId +'" class="alert ' + ( msg.type || "error" ) + '">' + ( msg.text || '' ) + '</div>');

	timers[ msgId ] = setTimeout( function(){
		hideAlert( '#' + msgId );
		delete APP.timers[ msgId ];
	}, _notificationTime * 1000 );

	$('#' + msgId ).on('click', function(){
		hideAlert( $(this) );
		clearTimeout( timers[ msgId ] );
		delete timers[ msgId ];
	} );
  return msgId;
};


var hideAlert = function( e ){
	$(e).fadeOut(250, function(){
		$(e).remove();
	});
};

js-notify.min.js

/*! Tiny jQuery Notify by Xavi Esteve © 2018 MIT */
var timers=[],notify=function(e){var t="msg-"+ +new Date;return 0===$("#alerts").length&&$("body").append('<div id="alerts" class="alerts"></div>'),$("#alerts").prepend('<div id="'+t+'" class="alert '+(e.type||"error")+'">'+(e.text||"")+"</div>"),timers[t]=setTimeout(function(){hideAlert("#"+t),delete APP.timers[t]},6e3),$("#"+t).on("click",function(){hideAlert($(this)),clearTimeout(timers[t]),delete timers[t]}),t},hideAlert=function(e){$(e).fadeOut(250,function(){$(e).remove()})};

js-notify.scss

/*! Tiny jQuery Notify by Xavi Esteve © 2018 MIT */
.alerts {
	position: fixed;
	bottom: 0;
	text-align: center;
	width: 100%;
	z-index: 3;
	font-size: $font-size-s;
}
.alert {
	background: $color-default;
	color: darken($color-default, 60);
	padding: 2px;
	margin: 2px;
	border-radius: $border-radius;
	box-shadow: 0 0 5px $color-default;
	cursor: pointer;
}
.alert.info {
	background: $color-info;
	box-shadow: 0 0 5px $color-info;
	color: darken($color-info, 60);
}
.alert.success {
	background: $color-success;
	box-shadow: 0 0 5px $color-success;
	color: darken($color-success, 60);
}
.alert.warning {
	background: $color-warning;
	box-shadow: 0 0 5px $color-warning;
	color: darken($color-warning, 60);
}
.alert.danger {
	background: $color-danger;
	box-shadow: 0 0 5px $color-danger;
	color: darken($color-danger, 60);
}
.alert small {
	opacity: 0.5;
}