饭桶教程-在线编辑器

<h2>提示信息</h2>
<p>点击 "x" 关闭提示框。</p>
<div class="alert">
    <span class="closebtn">×</span>
    <strong>危险!</strong> 危险操作提示。
</div>
<div class="alert success">
    <span class="closebtn">×</span>
    <strong>成功!</strong> 操作成功提示。
</div>
<div class="alert info">
    <span class="closebtn">×</span>
    <strong>提示!</strong> 提示信息修改等。
</div>
<div class="alert warning">
    <span class="closebtn">×</span>
    <strong>警告!</strong> 提示当前操作要注意。
</div>
<style>
    .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;
    }
</style>
<script>
    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);
        }
    }
</script>