<!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>