移动端自定义提示框

来源:互联网 发布:绝地战争源码 编辑:程序博客网 时间:2024/05/15 08:56


-------------------------我是js------------------------

 /*提示框方法*/

   function yuwqPrompt(textVal){
       var A = null;
      var B = null; 
     clearTimeout(A);
       clearTimeout(B);
     /*用js方式生成手机端提示*/
      if($(".yuwq-prompt").length){
        $(".yuwq-prompt").remove();
      }
      $("body").append("<div class='yuwq-prompt'>"+textVal+"</div>");
      $(".yuwq-prompt").fadeIn(500);
      A = setTimeout(function(){
      $(".yuwq-prompt").fadeOut(500);
      },1000);
      B = setTimeout(function(){
      $(".yuwq-prompt").remove();
      },2000);   

   }

-------------------------我是css------------------------

/*喻文强定义的一个提示框*/
.yuwq-prompt{
       width: 220px;
       height: 54px;
       line-height: 54px;
      color: rgba(255,255,255,.72);
      text-align: center;
      position: fixed;
      left: 50%;
      top:60px; 
      margin-left: -110px;
      z-index: 999;
     background-color: rgba(0,0,0,.64);
     border-radius: 6px;
     font-size: 14px;
     letter-spacing: 2px;
     text-indent: 2px;
    display: none;
}


--------------------我是调用方式----------------

yuwqPrompt("您已经晒过单了哦,亲");


------------------我是效果图-----------------------------




0 0