<h2>提示信息</h2>

<p>点击 "x" 关闭提示框。</p>

<div class="alert">

  <span class="closebtn">&times;</span>  

  <strong>危险!</strong> 危险操作提示。

</div>

​

<div class="alert success">

  <span class="closebtn">&times;</span>  

  <strong>成功!</strong> 操作成功提示。

</div>

​

<div class="alert info">

  <span class="closebtn">&times;</span>  

  <strong>提示!</strong> 提示信息修改等。

</div>

​

<div class="alert warning">

  <span class="closebtn">&times;</span>  

  <strong>警告!</strong> 提示当前操作要注意。

</div>

var close = document.getElementsByClassName("closebtn");

var i;

​

for (i = 0; i < close.length; i++) {

    close[i].onclick = function(){

        var div = this.parentElement;

        div.style.opacity = "0";

        setTimeout(function(){ div.style.display = "none"; }, 600);

    }

}

.alert {

    padding: 20px;

    background-color: #f44336;

    color: white;

    opacity: 1;

    transition: opacity 0.6s;

    margin-bottom: 15px;

}

​

.alert.success {background-color: #4CAF50;}

.alert.info {background-color: #2196F3;}

.alert.warning {background-color: #ff9800;}

​

.closebtn {

    margin-left: 15px;

    color: white;

    font-weight: bold;

    float: right;

    font-size: 22px;

    line-height: 20px;

    cursor: pointer;

    transition: 0.3s;

}

​

.closebtn:hover {

    color: black;

}