1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JS/CSS 各种操作信息提示效果</title> 6 <style> 7 .alert { 8 padding: 20px; 9 background-color: #f44336; 10 color: white; 11 opacity: 1; 12 transition: opacity 0.6s; 13 margin-bottom: 15px; 14 } 15 16 .alert.success {background-color: #4CAF50;} 17 .alert.info {background-color: #2196F3;} 18 .alert.warning {background-color: #ff9800;} 19 20 .closebtn { 21 margin-left: 15px; 22 color: white; 23 font-weight: bold; 24 float: right; 25 font-size: 22px; 26 line-height: 20px; 27 cursor: pointer; 28 transition: 0.3s; 29 } 30 31 .closebtn:hover { 32 color: black; 33 } 34 </style> 35 </head> 36 37 <body> 38 <h2>提示信息</h2> 39 <p>点击 "x" 关闭提示框。</p> 40 <div class="alert"> 41 <span class="closebtn">×</span> 42 <strong>危险!</strong> 危险操作提示。 43 </div> 44 45 <div class="alert success"> 46 <span class="closebtn">×</span> 47 <strong>成功!</strong> 操作成功提示。 48 </div> 49 50 <div class="alert info"> 51 <span class="closebtn">×</span> 52 <strong>提示!</strong> 提示信息修改等。 53 </div> 54 55 <div class="alert warning"> 56 <span class="closebtn">×</span> 57 <strong>警告!</strong> 提示当前操作要注意。 58 </div> 59 <script> 60 var close = document.getElementsByClassName("closebtn"); 61 var i; 62 63 for (i = 0; i < close.length; i++) { 64 close[i].onclick = function(){ 65 var div = this.parentElement; 66 div.style.opacity = "0"; 67 setTimeout(function(){ div.style.display = "none"; }, 600); 68 } 69 } 70 71 </script> 72 </body> 73 </html>