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

首先定义一个盒子

.pop {
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translate(-50%);
            width: 300px;
            height: 45px;
            text-align: center;
            font-size: 16px;
            line-height: 45px;
            border: rgb(34, 136, 167) 2px solid;
            border-radius: 5px;
            background-color: rgb(34, 136, 167, 0.7);
            /* opacity: 0; */
        }

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