1. 程式人生 > >移動端自定義提示框

移動端自定義提示框

-------------------------我是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("您已經晒過單了哦,親");

------------------我是效果圖-----------------------------