如何使用純JS實作Toas對話框（程式碼）
- 不言原創
- 2018-09-17 16:14:531373瀏覽
這篇文章帶給大家的內容是關於如何使用純JS實現Toas對話框（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>toast</title>
</head>
<style media="screen">
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-moz-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-o-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-ms-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@keyframes fadeOut {
0% {opacity: 1}
100% {opacity: 0}
}
@-webkit-keyframes fadeOut {
0% {opacity: 1}
100% {opacity: 0}
}
@-moz-keyframes fadeOut {
0% {opacity: 1}
100% {opacity: 0}
}
@-o-keyframes fadeOut {
0% {opacity: 1}
100% {opacity: 0}
}
@-ms-keyframes fadeOut {
0% {opacity: 1}
100% {opacity: 0}
}
#toast{
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 14px;
line-height: 1;
padding:10px;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
z-index: 9999;
}
.hide{
display: none;
}
.fadeOut{
animation: fadeOut .5s;
}
.fadeIn{
animation:fadeIn .5s;
}
</style>
<body></body>
</html>
<script>
var toast = function(params){
var el = document.createElement("p");
el.setAttribute("id","toast");
el.innerHTML = params.message;
document.body.appendChild(el);
el.classList.add("fadeIn");
setTimeout(function(){
el.classList.remove("fadeIn");
el.classList.add("fadeOut");
el.addEventListener("animationend", function(){
el.classList.add("hide");
});
},params.time);
};
//使用
toast({
message:"提交成功",
time:1500
});
/*------------------------
author:codeTnt
date:2018/7/13
-------------------------*/
</script>以上是如何使用純JS實作Toas對話框（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn