首先定義一個盒子

 1 .pop {
 2             position: fixed;
 3             top: 20%;
 4             left: 50%;
 5             transform: translate(-50%);
 6             width: 300px;
 7             height: 45px;
 8             text-align: center;
 9             font-size: 16px;
10             line-height: 45px;
11
 
             border: rgb(34, 136, 167) 2px solid;
12             border-radius: 5px;
13             background-color: rgb(34, 136, 167, 0.7);
14             /* opacity: 0; */
15         }

 <button id="btn">點選</button>
    <div class="pop"></div>

然後用jq的顯示和隱藏就好了

  $('.pop').fadeOut(0)
        $(
 
'#btn').click(function () {
            $('.pop').html('密碼錯誤')
            $('.pop').fadeIn(1000)
            $('.pop').delay(100).fadeOut(1000)
        })

我這裡使用的是jq的淡入和淡出效果

也可以使用js自帶的動畫效果

$('.pop').hide(0)
        $('#btn').click(function () {
            $('.pop').html('密碼錯誤')
            $('.pop').show(1000)
            $(
 
'.pop').delay(100).hide(1000)
        })

括號裡的數字是動畫時間,delay是jq的一個延時效果

超簡單的吧~~我一開始還尋思自己用js寫動畫,後來才發現js和jq都自己帶有動畫,至於標題什麼的,自己可以在pop裡面新增元素就OK了,基本也算是夠用了