toast提示效果

Html

Css

Js

此按钮是测试toast的例子

/* toast start */ @-webkit-keyframes toastAnimation { 0% { opacity:1; } 25% { opacity:0.75; } 50% { opacity:0.5; } 75% { opacity:0.25; } 100% { opacity:0; } }@keyframes toastAnimation { 0% { opacity:1; } 25% { opacity:0.75; } 50% { opacity:0.5; } 75% { opacity:0.25; } 100% { opacity:0; } }.toast-message { text-align:center; color:#fff; font-size:14px; width:60%; padding:30px 0; background-color:rgba(0,0,0,0.5); box-shadow:0 8px 16px 0 rgba(51,51,51,0.30); border-radius:8px; position:fixed; z-index:9999; left:20%; /*-webkit-animation:toastAnimation 1.5s ease-in 0s 1 normal; */ /*animation:toastAnimation 1.5s ease-in 0s 1 normal; */ } /* toast end */

$("#showToast").click(function() { toastMsg('toast提示成功'); }); /* Toast --start */ function toastMsg(msg) { if ($("div").is("#toastMessage")) { $("#toastMessage").remove(); } var msgDiv = '<div id="toastMessage" class="toast-message">' + '<span>' + msg + '</span>' + '</div>'; $("body").append(msgDiv); //set #toastMessage of top //计算屏幕的高度，并让toast提示框显示在屏幕的中间 var screenHeight = window.innerHeight; var toastMessage = $("#toastMessage"); var toastHeight = toastMessage.height(); var top = (screenHeight / 2) - (toastHeight / 2) + "px"; toastMessage.css("top", top); setTimeout(function() { $("#toastMessage").remove(); }, 1500); } /* Toast --end */

↑上面代码改变，会自动显示代码结果

jQuery调用版本：2.1.4

1. css样式里面注释掉的是动画效果。需要动画效果的，可以自己启用。@keyframes toastanimation动画关键针，可以按照实际需求，自行增加百分比或修改百分比中对应的值。增加了@-webkit-keyframes，主要是为了提高兼容性。

2.  调用 toastmsg(msg) 方法，就可以提示toast信息的。参数 msg，主要为文本字符串。提示文字建议不要太多，1.5秒后就消失。

settimeout(function() {
    $("#toastmessage").remove();
}, 1500);

这里 1500 表示 1.5秒 后消失，可以修改这个数值，自行设置多久时间后消失。