[jQuery]トースト通知を表示する

2020/09/04 加筆
バージョンアップさせ、非jQuery依存にしましたので、Androidっぽい見た目のトースト通知を作ってみた(非jQuery依存)の方をご覧ください

---

Androidで数秒で消える通知メッセージ（トースト通知）を、jQueryで実装してみました。
見た目もAndroid風で、画面下のセンターに黒背景・白文字で表示します。
(IE9～11、Chrome、FireFoxで動作確認)

　　　

トースト通知のJavaScript版ライブラリとしては、Toastrというライブラリが有名なようです。

JavaScript

// トースト通知クラス
var Toast = (function(){
	var timer;
	var speed;
    function Toast() {
		this.speed = 3000;
    }
    // メッセージを表示。表示時間(speed)はデフォルトで3秒
	Toast.prototype.show = function(message, speed) {
		if (speed === undefined) speed = this.speed;
		$('.toast').remove();
		clearTimeout(this.timer);
		$('body').append('<div class="toast">' + message + '</div>');
		var leftpos = $('body').width()/2 - $('.toast').outerWidth()/2;
		$('.toast').css('left', leftpos).hide().fadeIn('fast');
	
		this.timer = setTimeout(function() {
			$('.toast').fadeOut('slow',function(){
				$(this).remove();
			});
		}, speed);
	};
    // 明示的にメッセージを消したい場合は使う
	Toast.prototype.hide = function() {
		$('.toast').fadeOut('slow',function() {
			$(this).remove();
		});
	}
    return Toast;
})();

CSS

.toast{
	position: fixed;
	bottom: 10px;
	display: inline-block;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border-radius: 15px;
	padding: 8px 15px;
	border: none;
	z-index: 1000;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
	font-size: 13px;
}

var toast = new Toast();で初期化して、
使うときは、toast.show(msg);またはtoast.show(msg, 5000);みたいに
使います。