Toast messages with pure JS

animate.partial.css

/*! @import "animate.partial"; */
/*!
 * some animations from animate.css
 * github.com/daneden/animate.css
 * daneden.github.io/animate.css/
 */
/* .animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
} */
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}
@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		-ms-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}
}
.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
@-webkit-keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.fadeOut {
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}
}
@keyframes fadeOutDown {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		-ms-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}
}
.fadeOutDown {
	-webkit-animation-name: fadeOutDown;
	animation-name: fadeOutDown;
}

notifier42.css

/*! @import "notifier42"; */
/*!
 * notifier42
 * inspired by github.com/mlcheng/js-toast
 */
.notifier42 {
	display: block;
	width : 100%;
	max-width : 60%;
	position : fixed;
	right : 0;
	bottom : 0;
	left : 0;
	font-size: 1.100rem;
	font-weight: 400;
	text-align : center;
	word-break : keep-all;
	color : rgba(255,255,255,0.9);
	background-color: rgba(24,31,28,0.9);
	border-radius : 1.500pt;
	box-shadow : 0.188em 0.188em 0.188em 0 rgba(50,50,50,0.3);
	opacity : 0;
	padding: 1.000rem;
	margin : 0 auto;
	z-index : 1002;
}
.notifier42.notice {
	background-color: rgba(0,107,166,0.9);
}
.notifier42.warning {
	background-color: rgba(244,96,54,0.9);
}
.notifier42.error {
	background-color: rgba(214,40,57,0.9);
}
.notifier42.success {
	background-color: rgba(9,129,74,0.9);
}
/*!
 * reset for animate.css
 * daneden.github.io/animate.css/
 */
.notifier42.animated {
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

Notifier42.js

/*!
 * Notifier42
 * Toast messages with pure JS
 * gist.github.com/englishextra/5500a860c26d5e262ef3700d822ff698
 * inspired by github.com/mlcheng/js-toast
 * @param {String|Object} m text string or HTML ELement
 * @param {Int} [n] any positive whole number, default: 0
 * @param {String} t [additioal css class name]
 * var nf=Notifier42("message",8000);setTimeout(function(){nf.destroy()},2000);
 */
var Notifier42 = function (m, n, t) {
	"use strict";
	m = m || "No message passed as argument";
	n = n || 0,
	t = t || "";
	var d = document,
	b = BALA.one("body") || "",
	cls = "notifier42",
	c = BALA.one("." + cls) || "",
	cL = "classList",
	an = "animated",
	an2 = "fadeInUp",
	an4 = "fadeOutDown";
	if (!c) {
		c = crel("div");
		appendFragment(c, b);
	}
	c[cL].add(cls, an, an2);
	t && c[cL].add(t);
	if ("string" === typeof m) {
		m = d.createTextNode(m);
	}
	appendFragment(m, c);
	var s = function (cb) {
		c[cL].remove(an2);
		c[cL].add(an4);
		setAutoClearedTimeout(function () {
			c[cL].remove(an);
			c[cL].remove(an4);
			t && c[cL].remove(t);
			removeChildren(c);
			cb && "function" === typeof cb && cb();
		}, 400);
	};
	evento.add(b, "click", function h_b(e) {
		evento.remove(b, "click", h_b);
		s();
	});
	evento.add(c, "click", function h_c() {
		evento.remove(c, "click", h_c);
		s();
	});
	setAutoClearedTimeout(function () {
		0 !== n && s();
	}, n);
	return {
		destroy : function () {
			c && s(function () {
				removeElement(c);
			});
		}
	};
};
/*!
 * notifier42-write-me
 */
docReady(function () {
	"use strict";
	if (!!getHTTP()) {
		var w = window,
		n = "notifier42-write-me",
		m = "\u041D\u0430\u043F\u0438\u0448\u0438\u0442\u0435 \u043C\u043D\u0435, \u043E\u0442\u0432\u0435\u0447\u0443 \u043E\u0447\u0435\u043D\u044C \u0441\u043A\u043E\u0440\u043E. \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u0442\u044C\u0441\u044F \u043D\u0435 \u043D\u0443\u0436\u043D\u043E.",
		p = parseLink(w.location.href).origin;
		if (!Cookies.get(n) && p) {
			setAutoClearedTimeout(function () {
				Notifier42(crel("a", {
						"href" : "#/feedback"
					}, m),
					8000);
				Cookies.set(n, m);
			}, 8000);
		}
	}
});