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

移动web简易提示框

时间:2014-06-26 17:44:36      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:des   style   class   blog   code   java   

javascript代码


var msg={
    count:0,
    show:function(value,time,width){
        //type:定义显示样式,三种选择:success,notice,error;,不选则默认为success;
        //style:仅限定义提示层位置使用,默认底层提示栏上册15px处
        var me=document;
        var comDom=me.createElement("div");
        comDom.className="message-Container";
        comDom.setAttribute(‘name‘,‘i_message-Container‘);
        comDom.id="iMessage"+this.count;
        comDom.style.width=window.innerWidth+"px";
        var mDom=me.createElement("div");
        mDom.style.webkitAnimationDuration=time+"s";
        mDom.className=" message-style message-Animation";
        if(width){
            mDom.style.cssText+=" width:"+width+"px";
        }
        mDom.innerHTML=value;
        comDom.appendChild(mDom);
        var hisMessge=me.getElementsByName(‘i_message-Container‘);
        var i=hisMessge.length-1;
        for(i;i>=0;i--){
            if(hisMessge[i]){me.body.removeChild(hisMessge[i]);}
            else{break}
        }
        me.body.appendChild(comDom);
        comDom.style.cssText+=" top:"+(window.innerHeight/2-15)+"px";
        this.count++;
        this.destory(comDom.id,time);
    },
    destory:function(id,time){
        var desMe=function(){
            var cDom=document.getElementById(id);
            if(cDom){
                document.body.removeChild(cDom);
            }
        };
        setTimeout(desMe,time*1000+500);
    }
}

 

css代码


/*开始-自定义弹出提示层*/
.message-style{padding:0px 10px;margin:0 auto;min-width:100px;max-width:90%;text-align:center;position:relative;opacity: 0;-webkit-border-radius: 3px;background: #383838;border: 1px solid #202020;color: #fff;z-index: 1000;height: 30px;line-height: 30px;width: 80px;font-size: 14px;-webkit-box-shadow:1px 1px 3px #202020;}
@-webkit-keyframes message-Transition{0%{opacity: 0;}10%{opacity:1;}90%{opacity:1;}100%{opacity:0;}}
.message-Animation{-webkit-animation-name:message-Transition;-webkit-animation-duration:3s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:1;}
.message-Container{text-align:center;width:100%;border:0px;padding:0px;position:fixed;}

 

调用方法:

msg.show(‘hello word‘,2)

 


 

移动web简易提示框,布布扣,bubuko.com

移动web简易提示框

标签:des   style   class   blog   code   java   

原文地址:http://www.cnblogs.com/lvchat/p/3808647.html

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