JS/CSS 各种操作信息提示效果

 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">&times;</span>  
42       <strong>危险!</strong> 危险操作提示。
43    </div>
44 
45      <div class="alert success">
46           <span class="closebtn">&times;</span>  
47           <strong>成功!</strong> 操作成功提示。
48     </div>
49 
50      <div class="alert info">
51        <span class="closebtn">&times;</span>  
52        <strong>提示!</strong> 提示信息修改等。
53     </div>
54 
55      <div class="alert warning">
56        <span class="closebtn">&times;</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>