彈框真的太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'
})

還有其他的提示方法，自己也正在發現與學習，如果可以分享請與我聯繫

大家一起學習，共同進步