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

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

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

     <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>

   </head>

   <body>

    <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>

     <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>

   </body>

 </html>
巴特西

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

最新文章

热门文章
