[jQuery]トースト通知を表示する
2020/09/04 加筆
バージョンアップさせ、非jQuery依存にしましたので、Androidっぽい見た目のトースト通知を作ってみた(非jQuery依存)の方をご覧ください
Androidで数秒で消える通知メッセージ（トースト通知）を、jQueryで実装してみました。
見た目もAndroid風で、画面下のセンターに黒背景・白文字で表示します。
(IE9～11、Chrome、FireFoxで動作確認)
トースト通知のJavaScript版ライブラリとしては、Toastrというライブラリが有名なようです。
// トースト通知クラス
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;
})();
.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);みたいに
使います。
Author And Source
この問題について([jQuery]トースト通知を表示する), 我々は、より多くの情報をここで見つけました https://qiita.com/negi3d/items/4d4531af66774f503659著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .