码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2021-04-12 12:47:55      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:rgba   body   back   var   color   src   empty   ade   baidu   

现在的大多数网站都有校验,以及信息提示:为了给用户更好的体验可以不用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>

 

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

标签:rgba   body   back   var   color   src   empty   ade   baidu   

原文地址:https://www.cnblogs.com/btar/p/14644596.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!