移动端弹出提示插件，自写移动端dialog插件

最新推荐文章于 2024-08-22 08:13:32 发布
kongjiea
最新推荐文章于 2024-08-22 08:13:32 发布
阅读量1.2w
点赞数 1
分类专栏： html5 自写小插件文章标签： dialog 提示插件
本文链接：https://blog.csdn.net/kongjiea/article/details/42643665
版权
html5 同时被 2 个专栏收录
31 篇文章 1 订阅
订阅专栏
自写小插件
4 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1.0" />
<style>
body,div,p,span{margin:0;padding:0;}
body{
    font-family: "Microsoft Yahei","微软雅黑",Arial,Tahoma;
    font-size:14px;
}
.btn-container{
    width:300px;
    height:100px;
    margin:100px auto;
}
/*插件css*/
#animationTipBox{
    width:180px;
    height:auto;
    background-color:#fff;
    border-radius:8px;
    position:fixed;
    left:50%;
    top:50%;
    margin-left:-90px;
    margin-top:-75px;
    z-index:1001;
    -webkit-animation:alertAnimation 0.3s ease-in-out 0 1; 
}
#sm-load{
    width:20px;
    height: 20px;
    padding:0;
    background:none;
    padding:0;  
    position:relative;
    float:left;
    vertical-align:middle;
    margin-right:5px;
    top:0;
    left:0;
    margin: 0;
    -webkit-animation:none; 
}
#sm-load .load{
    width: 20px;
    height: 20px;
    border:none;
    margin:0 auto;
    top:0;
}
#sm-load .icon_box{
    margin:0 auto;
}
#sm-load .load .cirBox1,#sm-load  .load .cirBox2,#sm-load  .load .cirBox3{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 0;
}
#sm-load .load .cirBox1 > div,#sm-load  .load .cirBox2 > div,#sm-load  .load .cirBox3 > div{
    width: 4px;
    height:4px;
    border-radius: 100%;
    background-color: #fff;
    position: absolute;
}
#sm-load .load .icon_box{
    width:20px;
    height:20px;
}
#animationTipBox .icon{
    position:relative;
    width:80px;
    height:80px;
    border-radius:50px;
    border:4px solid #66cc33;
    margin:15px auto 5px auto;
}
#animationTipBox .icon_box{
    width:80px;
    height:80px;
    margin:0 auto;
    text-align:center;
    position:relative;
}
.tip .icon{
    width:80px;
    height:80px;
    background-color:#66cc33;
    border-radius:100%;
    color:#fff;
    font-size:80px;
    text-align:center;
    line-height:80px;   
}
#animationTipBox .lose .icon{
    border-color:#FF9090;
}
#animationTipBox .lose .icon_box{
    -webkit-animation:lose_Animation 0.5s;
}
#animationTipBox .dec_txt{
    font-size:16px;  
    text-align:center; 
    color:#666;
    line-height:26px;
    height:26px;
    padding:5px 0 10px 0;
}
.success .line_short{
    width:25px;
    height:5px;
    position:absolute;
    left: 14px;
    top: 46px;
    border-radius:4px;
    background-color:#66cc33;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    -webkit-animation:success_short_Animation 0.65s;
}
.success .line_long{
    width:47px;
    height:5px;
    position:absolute;
    right: 8px;
    top: 38px;
    border-radius:4px;  
    background-color:#66cc33;
    -webkit-transform:rotate(-45deg);
    -webkit-animation:success_long_Animation 0.65s;
}

.lose .line_left,.lose .line_right{
    width:47px;
    height:5px;
    position:absolute;
    left: 17px;
    top: 37px;
    border-radius:4px;
    background-color:#FF9090;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);    
}
.lose .line_right{  
    right: 11px;
    top: 37px;
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);   
}



/* tipBoxKeyFrames */
    @keyframes alertAnimation{
        0% {
            transform: scale(0.5);
        }
        45% {
            transform: scale(1.25);
        }
        80% {
            transform: scale(0.95);
        }
        100% {
            transform: scale(1);
        } 
    }
    @-webkit-keyframes alertAnimation{
        0% {
            -webkit-transform: scale(0.5); }
        45% {
            -webkit-transform: scale(1.25); }
        80% {
            -webkit-transform: scale(0.95); }
        100% {
            -webkit-transform: scale(1);
        } 
    }
/* tipBoxKeyFrames */


/*success_Animation*/ 
    @-webkit-keyframes success_short_Animation{
        0% {
            width: 0;
            left: 1px;
            top: 19px;
        }
        54% {
            width: 0;
            left: 1px;
            top: 19px;
        }
        70% {
            width: 50px;
            left: -4px;
            top: 37px;
        }
        84% {
            width: 17px;
            left: 21px;
            top: 48px;
        }
        100% {
            width: 25px;
            left: 14px;
            top: 45px;
        }
    }
    @keyframes success_short_Animation{
        0% {
            width: 0;
            left: 1px;
            top: 19px;
        }
        54% {
            width: 0;
            left: 1px;
            top: 19px;
        }
        70% {
            width: 50px;
            left: -4px;
            top: 37px;
        }
        84% {
            width: 17px;
            left: 21px;
            top: 48px;
        }
        100% {
            width: 25px;
            left: 14px;
            top: 45px;          
        }
    }
    @-webkit-keyframes success_long_Animation{
        0% {
            width: 0;
            right: 46px;
            top: 54px;
        }
        65% {
            width: 0;
            right: 46px;
            top: 54px; 
        }
        84% {
            width: 55px;
            right: 0px;
            top: 35px; 
        }
        100% {
            width: 47px;
            right: 8px;
            top: 38px; 
        } 
    }
    @keyframes success_long_Animation{
        0% {
            width: 0;
            right: 46px;
            top: 54px;
        }
        65% {
            width: 0;
            right: 46px;
            top: 54px; 
        }
        84% {
            width: 55px;
            right: 0px;
            top: 35px; 
        }
        100% {
            width: 47px;
            right: 8px;
            top: 38px; 
        } 
    }
/*success_Animation*/

/* ---------------------------------------------------------------------------------------------------------------------------- */

/*lose_Animation*/
    @-webkit-keyframes lose_Animation{
        0%{
            -webkit-transform:scale(0.6);
            opacity:0.2;
        }
        50% {
            -webkit-transform:scale(0.6);
            opacity:0.5;
        }
        80% {
            -webkit-transform:scale(1.15);
            opacity:0.8;
        }
        100% {
            -webkit-transform:scale(1);
            opacity:1.0;
        } 
    }
/*lose_Animation*/


/*load_Animation*/
    @-webkit-keyframes load_Animation{
        0%{
            -webkit-transform:scale(0.6);
            opacity:0.2;
        }
        50% {
            -webkit-transform:scale(0.6);
            opacity:0.5;
        }
        80% {
            -webkit-transform:scale(1.15);
            opacity:0.8;
        }
        100% {
            -webkit-transform:scale(1);
            opacity:1.0;
        } 
    }
/*load_Animation*/
.load{
    position: relative;
    width: 60px;
    height: 80px;
    border-radius: 50px;
    border: 4px solid #fff;
    margin: 15px auto 5px auto;
    top: 10px;
}
.load .icon_box{
    margin:10px auto;
    width:60px;
    height:60px;    
}
.load .cirBox1,.load .cirBox2,.load .cirBox3{
    width:60px; 
    height:60px;
    position:absolute;
    left:0;
    top:0;
}
.load .cirBox1 > div,.load .cirBox2 > div,.load .cirBox3 > div{
    width:10px;
    height:10px;
    border-radius:100%;
    background-color:#ccc;
    position:absolute;
}
.load  .cirBox1{
    -webkit-transform:rotate(30deg);
}
.load  .cirBox2{
    -webkit-transform:rotate(60deg);
}
.load  .cirBox3{ 
    -webkit-transform:rotate(90deg);
}
.load .cir1{
    left:0;
    top:0;
}
.load .cir2{
    right:0;
    top:0;
}
.load .cir3{
    right:0;
    bottom:0;
}
.load .cir4{
    left:0;
    bottom:0;
}
.load .cir1,.load .cir2,.load .cir3,.load .cir4{
    -webkit-animation:cir_Animation 1.2s ease 0 infinite;
}
.cirBox1 .cir2{
    -webkit-animation-delay:-1.1s;
}
.cirBox1 .cir3{
    -webkit-animation-delay:-0.8s;
}
.cirBox1 .cir4{
    -webkit-animation-delay:-0.5s;
}

.cirBox2 .cir2{
    -webkit-animation-delay:-1.0s;
}
.cirBox2 .cir3{
    -webkit-animation-delay:-0.7s;
}
.cirBox2 .cir4{
    -webkit-animation-delay:-0.4s;
}

.cirBox3 .cir2{
    -webkit-animation-delay:-0.9s;
}
.cirBox3 .cir3{
    -webkit-animation-delay:-0.6s;
}
.cirBox3 .cir4{
    -webkit-animation-delay:-0.3s;
}



@-webkit-keyframes cir_Animation{
    0%,80%,100%{
        -webkit-transform:scale(0.4);
    }
    40%{
        -webkit-transform:scale(1.0);
    }
}
.mask{
    width:100%;
    height:100%;
    background-color:#000;
    opacity:.8;
    position: fixed;
    left: 0;
    top: 0;
    z-index:1000;
}
</style>
</head> 
<body>
<div class="btn-container">
    <input type="button" id="success" value="成功" />
    <input type="button" id="error" value="错误" />
    <input type="button" id="load" value="正在加载" />
    <input type="button" id="tip" value="提示" />
</div>
</body>
</html>
<script src="http://libs.baidu.com/zepto/0.8/zepto.min.js"></script>
<script type="text/javascript">
/*
 * @弹出提示层 ( 加载动画(load), 提示动画(tip), 成功(success), 错误(error), )
 * @method  tipBox
 * @description 默认配置参数 
 * @time    2014-12-19 
 * @param {Number} width -宽度
 * @param {Number} height -高度       
 * @param {String} str -默认文字
 * @param {Object} windowDom -载入窗口 默认当前窗口
 * @param {Number} setTime -定时消失(毫秒) 默认为0 不消失
 * @param {Boolean} hasMask -是否显示遮罩
 * @param {Boolean} hasMaskWhite -显示白色遮罩 
 * @param {Boolean} clickDomCancel -点击空白取消
 * @param {Function} callBack -回调函数 (只在开启定时消失时才生效)
 * @param {String} type -动画类型 (加载,成功,失败,提示)
 * @example 
 * new TipBox(); 
 * new TipBox({type:'load',setTime:1000,callBack:function(){ alert(..) }}); 
*/
function TipBox(cfg){
    this.config = { 
        width          : 180,    
        height         : 150,               
        str            : '正在处理',     
        windowDom      : window, 
        setTime        : 0,   
        hasMask        : true,  
        hasMaskWhite   : false, 
        clickDomCancel : false,  
        callBack       : null,
        type           : 'success'
    }
    $.extend(this.config,cfg);  
    
    //存在就retrun
    if(TipBox.prototype.boundingBox) return;
    
    //初始化
    this.render(this.config.type);  
    return this; 
};

//外层box
TipBox.prototype.boundingBox = null;

//渲染
TipBox.prototype.render = function(tipType,container){  
    this.renderUI(tipType); 
    
    //绑定事件
    this.bindUI(); 
    
    //初始化UI
    this.syncUI(); 
    $(container || this.config.windowDom.document.body).append(TipBox.prototype.boundingBox);   
};

//渲染UI
TipBox.prototype.renderUI = function(tipType){ 
    TipBox.prototype.boundingBox = $("<div id='animationTipBox'></div>");       
    tipType == 'load'    && this.loadRenderUI();
    tipType == 'success' && this.successRenderUI(); 
    tipType == 'error'   && this.errorRenderUI();
    tipType == 'tip'     && this.tipRenderUI();
    TipBox.prototype.boundingBox.appendTo(this.config.windowDom.document.body);
                
    //是否显示遮罩
    if(this.config.hasMask){
        this.config.hasMaskWhite ? this._mask = $("<div class='mask_white'></div>") : this._mask = $("<div class='mask'></div>");
        this._mask.appendTo(this.config.windowDom.document.body);
    }   
    
    //定时消失
    _this = this;
    !this.config.setTime && typeof this.config.callBack === "function" && (this.config.setTime = 1);    
    this.config.setTime && setTimeout( function(){ _this.close(); }, _this.config.setTime );
};

TipBox.prototype.bindUI = function(){
    _this = this;           
    
    //点击空白立即取消
    this.config.clickDomCancel && this._mask && this._mask.click(function(){_this.close();});                       
};
TipBox.prototype.syncUI = function(){           
    TipBox.prototype.boundingBox.css({
        width       : this.config.width+'px',
        height      : this.config.height+'px',
        marginLeft  : "-"+(this.config.width/2)+'px',
        marginTop   : "-"+(this.config.height/2)+'px'
    }); 
};

//提示效果UI
TipBox.prototype.tipRenderUI = function(){
    var tip = "<div class='tip'>";
        tip +="     <div class='icon'>i</div>";
        tip +="     <div class='dec_txt'>"+this.config.str+"</div>";
        tip += "</div>";
    TipBox.prototype.boundingBox.append(tip);
};

//成功效果UI
TipBox.prototype.successRenderUI = function(){
    var suc = "<div class='success'>";
        suc +=" <div class='icon'>";
        suc +=      "<div class='line_short'></div>";
        suc +=      "<div class='line_long'></div>  ";      
        suc +=  "</div>";
        suc +=" <div class='dec_txt'>"+this.config.str+"</div>";
        suc += "</div>";
    TipBox.prototype.boundingBox.append(suc);
};

//错误效果UI
TipBox.prototype.errorRenderUI = function(){
    var err  = "<div class='lose'>";
        err +=  "   <div class='icon'>";
        err +=  "       <div class='icon_box'>";
        err +=  "           <div class='line_left'></div>";
        err +=  "           <div class='line_right'></div>";
        err +=  "       </div>";
        err +=  "   </div>";
        err +=  "<div class='dec_txt'>"+this.config.str+"</div>";
        err +=  "</div>";
    TipBox.prototype.boundingBox.append(err);
};

//加载动画load UI
TipBox.prototype.loadRenderUI = function(){
    var load = "<div class='load'>";
        load += "<div class='icon_box'>";
    for(var i = 1; i < 4; i++ ){
        load += "<div class='cirBox"+i+"'>";
        load +=     "<div class='cir1'></div>";
        load +=     "<div class='cir2'></div>";
        load +=     "<div class='cir3'></div>";
        load +=     "<div class='cir4'></div>";
        load += "</div>";
    }
    load += "</div>";
    load += "</div>";
    load += "<div class='dec_txt'>"+this.config.str+"</div>";
    TipBox.prototype.boundingBox.append(load);
};

//关闭
TipBox.prototype.close = function(){    
    TipBox.prototype.destroy();
    this.destroy();
    this.config.setTime && typeof this.config.callBack === "function" && this.config.callBack();                
};

//销毁
TipBox.prototype.destroy = function(){
    this._mask && this._mask.remove();
    TipBox.prototype.boundingBox && TipBox.prototype.boundingBox.remove(); 
    TipBox.prototype.boundingBox = null;
};
</script>
<script type="text/javascript">
    //成功
    $("#success").click(function(){
        new TipBox({type:'success',str:'操作成功',setTime:1500});
    });
    //错误
    $("#error").click(function(){
        new TipBox({type:'error',str:'对不起,出错了!',setTime:1500});
    });
    
    //提示
    $("#tip").click(function(){
        new TipBox({type:'tip',str:'这是提示信息',clickDomCancel:true,setTime:10000500});
    });
    
    //加载
    $("#load").click(function(){
        new TipBox({type:'load',str:"努力加载中..",setTime:1500,callBack:function(){
            new TipBox({type:'success',str:'操作成功',setTime:1500});
        }});
    });
    
</script>