弹框真的太low了，这样提示会好很多

现在大家应该都知道也是都不喜欢弹框提醒这种难看的提醒方式吧

这里给大家推荐一下

①input的提醒方式

2121

这样应该会好看得多而且也方便得多，而且实现起来也是非常的方便

<div class="login_item">
                        <input id="username" class="login_input" type="text" placeholder="请输入您的账号">
                    </div>
                    <div class="login_item">
                        <input id="password" class="login_input" type="password" placeholder="请输入您的密码">
                    </div>
                    <div class="login_item">
                        <input id="visit_btn" class="login_input_btn visit_btn" type="button" value="游客登入" >
                        <input id="member_btn" class="login_input_btn member_btn" type="button" value="成员登陆" >
                    </div>

function checkUserName(user, username) {
    if (username !== '') {
        return true
    } else {
        user = document.getElementById('username')
        user.classList.add('no_member')
        user.placeholder = '请输入您的账号或者游客访问！'
        user.focus()
        return false
    }
}

function checkPassword(psw, password) {
    if (password !== '') {
        return true
    } else {
        psw = document.getElementById('password')
        psw.classList.add('no_member')
        if (username !== '' && window.event.keyCode === 13 || member_btn.click()) {
            psw.focus()
        }
        psw.placeholder = '请输入您的密码！'
        return false
    }
}

使用input的background引入icon图标根据不同的提示信息改变

清空value添加相应的样式，再添加相应placeholder

同时配合后台返回后台提示信息

②其他提示信息

很多时候，什么提交按钮点击之后的提示信息也是使用alert来弹框很不美观

不妨使用第不固定的显示方式

固定在用户浏览页面的顶部点击关闭按钮之后才可以操作上面的导航栏这样既保证了用户看到了提示信息

也相对来说更加的美观

.alert_banner{
    /* display: none; */
    width: 100%;
    height: 50px;
    left: 0;
    top:0;
    position: fixed;
    /* 只有关闭之后才可以继续操作 */
    background: rgba(255, 255, 255, 0.904);
    z-index: 999;
}
#alert_close_btn{
    width:30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 20px;
    background:rgb(108, 231, 240);
    /* color: white; */
    border: 0;
    border-radius: 30px;
}
#alert_close_btn:hover{
    background: orangered;
}

 配合javascript函数简单实现

 

//show messageg on the top
function showTopTips(){
    var alert_msgs = {
        server_ERROR:'服务器错误！',
        cPw_SUCCESS:'密码修改成功，下次登陆生效！',
        sign_SUCCESS:'报名成功，注意接收管理员消息！'
    }
    alert_banner_msg.innerHTML = alert_msgs.server_ERROR
}
//close btn
alert_close_btn.addEventListener('click',function (){
    alert_banner.style.display = 'none'
})

还有其他的提示方法，自己也正在发现与学习，如果可以分享请与我联系

大家一起学习，共同进步