<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的弹窗runoob.com)</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<style>
.myDiloag{
position:fixed;
top:20px;
left:50%;
z-index:10;
margin-left；-150px;
300px;
height:60px;
background:#e6ebf5;
display:none;
}
.animated {
animation-duration: .8s;
animation-fill-mode: both;
}
@keyframes fadeInDownBig {
from {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInDownBig {
animation-name: fadeInDownBig;
}
</style>
<script>
$(function(){
var oDilog1='<div class="myDiloag tan-success animated fadeInDownBig">'+
' 成功'+
'</div>';
var oDilog2='<div class="myDiloag tan-fail animated fadeInDownBig">'+
' 失败'+
'</div>';
var oDilog3='<div class="myDiloag tan-waring animated fadeInDownBig">'+
' 警告'+
'</div>';
$("body").append(oDilog1);
$("body").append(oDilog2);
$("body").append(oDilog3);
$(".a").click(function(){//成功
myDiloag(".tan-success")
});
$(".b").click(function(){//失败
myDiloag(".tan-fail")
});
$(".c").click(function(){//警告
myDiloag(".tan-waring")
});
function myDiloag(elem){
$(elem).fadeIn(500).delay(2000).fadeOut();
}
});
</script>
</head>
<body>
<p class="a">成功</p>
<p class="b">失败</p>
<p class="c">警告</p>
</body>
</html>