# HTML信息提示框css+js
<html><head>
<style>
/* 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:30%;
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:35%;
/*-webkit-animation:toastAnimation 1.5s ease-in 0s 1 normal;
*/
/*animation:toastAnimation 1.5s ease-in 0s 1 normal;
*/
}
/* toast end */
</style>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script></head><body>
<button id="showToast">此按钮是测试toast的例子</button>
<script>
$("#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 */
</script></body></html>