移动端 简单代码 实现 文字提示

CSS代码

<style type="text/css">
   /* 消息提醒样式 */
   .msgs {
       display: block;
       background:rgba(0,0,0,.7);
       color: #fff;
       padding: 10px 20px;
       line-height: 50px;
       position: fixed;
       left: 50%;
       bottom: 25%;
       -webkit-transform: translate(-50%);
       transform: translate(-50%);
       border-radius: 3px;
       display: none;
       z-index: 9999;
       font-size: 28px;
       text-align: center;
   }
   /* 遮罩层 */
   .bigdivs{
       display: none;
       position: fixed;
       bottom: 0px;
       width: 100%;
       height: 100%;
   }
</style>

js代码

<script>
    $('body').append('<div class="bigdivs"><div class="msgs"></div></div>');
    /* 消息提醒 */
    function msgs(text,time){
        if (!time) {
            time = 1500;
        }
        $('.bigdivs').attr('style','display:block');
        $('.msgs').text(text).fadeIn();
        setTimeout(function(){
            $('.bigdivs').fadeOut();        
        },time)
    }
</script>