Jquery 网站保存信息提示消息实现，提示后自动消失

时间：2021-04-12 12:47:55 收藏：0 阅读：0

现在的大多数网站都有校验，以及信息提示：为了给用户更好的体验可以不用alert提示消息，采用jQuery提示完消息，自动消失。

CSS

<style>
    #tip_message {
        z-index: 9999;
        position: fixed;
        left: 0;
        top: 40%;
        text-align: center;
        width: 100%;
    }
     
    #tip_message span {
        background-color: #03C440;
        opacity: .8;
        padding: 20px 50px;
        border-radius: 5px;
        text-align: center;
        color: #fff;
        font-size: 20px;
    }
     
    #tip_message span.error {
        background-color: #EAA000;
    }
</style>

javascript代码如下：

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
         
        //提示成功信息    
        ShowSuccessMessage = function(message, life) {
            var time = 3000;
            if (!life) {
                time = life;
            }
             
            if ($("#tip_message").text().length > 0) {
                var msg = "<span>" + message + "</span>";
                $("#tip_message").empty().append(msg);
            } else {
                var msg = ‘<div id="tip_message"><span>‘ + message + "</span></div>";
                $("body").append(msg);
            }
             
            $("#tip_message").fadeIn(time);
            $("#tip_message").fadeOut(time);
     
        };
         
        //提示错误信息
        ShowErrorMessage = function(message, life) {
            ShowSuccessMessage(message, life);
            $("#tip_message span").addClass("error");
        };
         
        ShowSuccessMessage("Hello success!", 1000); // 第二个参数life是指消息显示时间
        //ShowErrorMessage("Hello error!", 1000);
    });
 
</script>