toast提示 封裝
阿新 • • 發佈：2020-08-13
直接上程式碼 拿走不送！
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>toast</title> 6 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 7 <style> 8 .toast { 9 position: fixed; 10 top: 18%; 11 left: 50%; 12 transform: translateX(-50%); 13 padding: 10px 20px; 14 border-radius: 6px; 15 color: #fff; 16 font-size: 14px; 17 min-width: 250px; 18 text-align: center; 19 display: none; 20 z-index: 10000; 21 border:solid 1px #fff; 22 } 23 24 .succ { 25 background: rgb(78, 164, 78); 26 display: block; 27 } 28 29 .fail { 30 background: rgba(230, 0, 0, 0.6); 31 display: block; 32 }33 </style> 34 </head> 35 <body> 36 <button type="button" id="btn"> 37 點選 38 </button> 39 <div class="toast " style="top:8%; "></div> 40 </body> 41 <script type="text/javascript"> 42 $('#btn').on("click",function(){ 43 toast('事件成功', 'succ',1); 44 }) 45 //toast 46 function toast(content, sName, fn) { 47 $('.toast').addClass(sName); 48 $('.toast').html(content); 49 setTimeout(() => { 50 $('.toast').removeClass(sName); 51 $('.toast').html(''); 52 if (fn) { 53 console.log(1) 54 toast('事件失敗', 'fail'); 55 } 56 }, 2000); 57 } 58 </script> 59 </html>