視窗右下角訊息彈出框
阿新 • • 發佈：2018-11-16
<!DOCTYPE html> <html> <head> <title>視窗右下角訊息彈出框</title> <meta charset="utf-8"/> <style> *{margin:0;padding:0} #msg{width:200px;height:200px; position:fixed; right:30px; bottom:-200px; background-color:LightBlue; transition: all .5s linear; } #msg>a{float:right; padding:5px 10px; border:1px solid black; cursor:pointer; } </style> </head> <body> <div id="msg"> <a>X</a> </div> <script> //首先要在css中為msg新增transition屬性 //當整個頁面載入完成後 window.onload=function(){ msg.style.bottom="0px"; } msg.children[0].onclick=function(){ msg.style.bottom="-200px"; setTimeout(function(){msg.style.bottom="0px"},5000); } </script> </body> </html>