简单的js提示框,仅仅用jq和css就可以

首先定义一个盒子

 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了,基本也算是够用了