js库
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var method={ msg_layer:function(obj){ //弹框 $(".msg-layer-bg,.msg-layer").remove(); $("body").append( '<div class="msg-layer-bg"></div><div class="msg-layer showAlert"><h5></h5><div class="msg-con"></div><div class="layer-close">×</div><div class="layer-btn"><input type="button" class="layer-cancel"/><input type="button" class="layer-commit"/></div></div>'); var _layerBg=$(".msg-layer-bg"),_layer=$(".msg-layer"),_close=$(".layer-close"),_cansel=$(".layer-cancel"),_commit=$(".layer-commit"); _layer.attr("data-animation",obj.type); var winH=$(window).height(),winW=$(window).width(); if(obj.title){ _layer.find("h5").html(obj.title); }else{ _layer.find("h5").css("display","none") } if(obj.content){ _layer.find($(".msg-con")).html(obj.content); }else if(obj.url){ $.get(obj.url,function(data){ _layer.find($(".msg-con")).html(data); }); } _layer.css({"display":"block"}); _layerBg.css({"display":"block"}); if(!obj.close || obj.close == "true"){ //关闭按钮 _close.css("display","block"); _close.on("click",function(){ method.msg_close(); }) }else{ _close.css("display","none"); } if(obj.btn){ //按钮 if(obj.btn[0] != ""){ _cansel.css("display","inline-block"); _cansel.val(obj.btn[0]); _cansel.on("click",function(){ if(obj.callBack1){ obj.callBack1(); method.msg_close(); }else{ method.msg_close(); } }) } if(obj.btn[1] != ""){ _commit.css("display","inline-block"); _commit.val(obj.btn[1]); _commit.on("click",function(){ if(obj.callBack2){ obj.callBack2(); } }) } } if(obj.area){ //宽高 if(obj.area[0] != "auto" && obj.area[1] != "auto"){ _layer.css({"width":obj.area[0],"height":obj.area[1],"left":winW/2-parseFloat(obj.area[0])/2,"top":winH/2-parseFloat(obj.area[1])/2}); }else if(obj.area[0] != "auto" && obj.area[1] === "auto"){ _layer.css({"width":obj.area[0],"height":obj.area[1],"left":winW/2-parseFloat(obj.area[0])/2,"top":winH/2-(_layer.height()+20)/2}); }else if(obj.area[0] === "auto" && obj.area[1] != "auto"){ _layer.css({"width":_layer.width()+20,"height":obj.area[1],"left":winW/2-(_layer.width()+20)/2,"top":winH/2-parseFloat(obj.area[1])/2}); } }else{ _layer.css({width:_layer.width()+20+"px","margin":"-"+((_layer.height()+10)/2)+"px 0 0 -"+((_layer.width()+20)/2)+"px"}); } }, msg_close:function(){ //关闭弹框 var timer=null; $(".msg-layer").removeClass('showAlert').addClass("hideAlert"); timer=setTimeout(function(){ clearTimeout(timer); $(".msg-layer-bg").remove(); $(".msg-layer").remove(); },200); }, msg_fade:function(obj){ //弹出信息框,显示几秒后自动消失 //ele表示需要显示的元素,time表示时间,msg表示弹框中的内容 if($(".msy-alert").length>0){ $(".msy-alert").remove(); } $("body").append('<div class="msy-alert showAlert" data-animation="layerFadeIn">'+obj.content+'</div>'); var msg_timer=null,$msg=$(".msy-alert"); var winH=$(window).height(),winW=$(window).width(); if(obj.area){ if(obj.area[0] != "auto" && obj.area[1] != "auto"){ $msg.css({"width":obj.area[0],"height":obj.area[1],"left":winW/2-parseFloat(obj.area[0])/2,"top":winH/2-parseFloat(obj.area[1])/2}); }else if(obj.area[0] != "auto" && obj.area[1] === "auto"){ $msg.css({"width":obj.area[0],"height":obj.area[1],"left":winW/2-parseFloat(obj.area[0])/2,"top":winH/2-($msg.height())/2}); }else if(obj.area[0] === "auto" && obj.area[1] != "auto"){ $msg.css({"width":$msg.width()+20,"height":obj.area[1],"left":winW/2-($msg.width())/2,"top":winH/2-parseFloat(obj.area[1])/2}); } }else{ $msg.css({width:$msg.width()+20+"px","margin":"-"+(($msg.height()+10)/2)+"px 0 0 -"+(($msg.width()+20)/2)+"px"}); } if(obj.line){ $msg.css("line-height",obj.line) } msg_timer=window.setTimeout(function(){ msg_timer=null; clearTimeout(msg_timer); $(".msy-alert").removeClass('showAlert').addClass("hideAlert").remove(); },obj.time) }, getRandom:function(n,m){ //获取随机数 n=Number(n); m=Number(m); if(isNaN(n)||isNaN(m)){ return Math.random(); } if(n>m){ var t=n; n=m; m=t; } return Math.round(Math.random()*(m-n)+n); }, hasClass: function () { //原生js判断是否有某个class 相当于jq的hasClass() var cName = arguments[0], ele = arguments[1], reg = new RegExp("(?:^| +)" + cName + "(?: +|$)", "g"); return reg.test(ele.className); }, addClass: function () { //原生js新增class 相当于jq的addClass() var cName = arguments[0], ele = arguments[1]; if (!this.hasClass(cName, ele)) { ele.className += " " + cName; } }, removeClass: function () { //原生js移除class相当于jq中的removeClass() var cName = arguments[0], ele = arguments[1], reg = new RegExp("(?:^| +)" + cName + "(?: +|$)", "g"); if (this.hasClass(cName, ele)) { ele.className = ele.className.replace(reg, ""); } }, byClass:function (cName,context){ //通过className获取 context=context||document; if(context.getElementsByClassName){ return context.getElementsByClassName(cName); } var ary=[]; var allTag=context.getElementsByTagName("*"); for(var i=0;i<allTag.length;i++){ var cur=allTag.item(i); if(cur.className.indexOf(cName)>-1){ ary.push(cur); } } return ary; }, setOpacity:function(ele,level){ //原生js设置透明度 if(ele.filters){ ele.style.filter = "alpha(opacity="+level+")"; }else{ ele.style.opacity = level / 100; } }, fadeIn:function(ele){ //原生js模仿jq fadeIn()效果 method.setOpacity(ele,0); for(var i = 0;i<=20;i++){ (function(){ var timer1=null; clearTimeout(timer1); var level = i * 5; timer1=setTimeout(function(){ method.setOpacity(ele, level) },i*25); })(i); } }, fadeOut:function(ele){ //原生js模仿jq实现fadeOut()效果 for(var i = 0;i<=20;i++){ (function(){ var timer2=null; clearTimeout(timer2); var level = 100 - i * 5; timer2=setTimeout(function(){ method.setOpacity(ele, level) },i*25); })(i); } }, //选项卡 tab:function(a,b,className){ //a表示点击的按钮 一般传$(this) //b表示内容项 className表示active选项 var index=a.index(); a.addClass(className); a.siblings().removeClass(className); b.eq(index).addClass(className); b.eq(index).siblings().removeClass(className); }, //当scrollTop大于100的时候,显示回到顶部按钮 topBtn:function(a,time){ if($(window).scrollTop()>100){ a.fadeIn(time); }else{ a.fadeOut(time); } }, //回到顶部 toTop:function(time){ $("html,body").animate({scrollTop:0},time); return false; }, //全选--全选按钮 checkAll:function(a,b){ //a表示除全选按钮以外的所有复选框 //b表示全选复选框 a.prop("checked",b.prop("checked")); }, //全选--除全选按钮以外的所有复选框 checkBtn:function(a,b){ var $sel= a, flag=true; for(var i=0;i<$sel.length;i++){ if($sel[i].checked==false){ flag=false; break; } } b.prop("checked",flag); }, //锚点链接 anchor:function(a,time){ //a表示当前点击的按钮 var href = a.attr("href"), pos = $(href).offset().top; $("html,body").animate({scrollTop:pos}, time); return false; }, //当元素出现在可视区域时再显示 show:function (obj,className){ //此方法主要用于页面内容时显示时添加效果,此处就可以给元素添加left_move、right_move、top_move、bottom_move来实现四个方向的移动。如show($(".intro_leftM"),"left_move"); $(function(){ var clientH=document.documentElement.clientHeight||document.body.clientHeight, scrollT=$(this).scrollTop(); for(var i=0;i<obj.length;i++){ var introH=$(obj[i]).height(); if($(obj[i]).offset().top-scrollT+introH>0&&$(obj[i]).offset().top-scrollT<clientH){ $(obj[i]).addClass(className); } } $(document).on("scroll",function(){ var scrollT=$(this).scrollTop(); for(var i=0;i<obj.length;i++){ var conH=$(obj[i]).height(); if($(obj[i]).offset().top-scrollT+introH>0&&$(obj[i]).offset().top-scrollT<clientH){ $(obj[i]).addClass(className); } } }) }) }, img_lazyLoad:function(imgSrc){ //此方法给需要延迟加载的图片添加class名lazy,data-original中存放img的真实路径,2.jpg表示默认显示的图片 //animation: fade-img .5s; //@-webkit-keyframes fade-img{0%{opacity:0}to{opacity:1}} var $lazy=$("img.lazy"); $lazy.attr("src",imgSrc); $lazy.each(function () { var clientH = $(window).height(), $height = $(this).height(), $scroll = $(window).scrollTop(), $off = $(this).offset().top, $val=$(this).attr("data-original"); if ($off + $height - $scroll < clientH) { $(this).attr("src",$val); } }) }, //切换class toggleClass:function(a,className){ a.addClass(className).siblings().removeClass(className); }, notBlank:function(str) { //去除input框val值的空格 var blank = /^\S*$/; return str.replace(/\s*/g, ""); }, matchEmail:function(str){ //匹配邮箱 var email=/^([\w\-])([\w\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,5})$/; return email.test(str); }, matchMobile:function(str){ //匹配手机号 var mobile=/^1[34578][0-9]{9}$/g; return mobile.test(str); }, matchUser:function(str){ //必须包含数字、小写字母、大写字母中至少两种 5-10位 var user=/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)[0-9A-Za-z]{5,10}$/; return user.test(str); }, zero:function (s){ //对于小于10的数字,再数字前边补0,一般用于格式化日期 return s < 10 ? '0' + s: s; }, keyDown:function (event,func) { //回车事件 func表示验证需要提交的表单没有问题的时候,需要执行的函数 if (event.keyCode == 13) { func(); } }, roll:function(opt){ //无缝滚动效果 //el表示滚动列表ul的直接父元素 也就是容器 //list表示当前的滚动列表 也就是ul //direction表示滚动的方向 top或left //time表示滚动的时间间隔 一般20-30最佳 //如果是横向滚动 li设置为inline-block比浮动效果更佳 var timer; function move() { var range, _val, origin, $li = opt.list.find("li").eq(0); if (opt.direction == "top") { range = opt.list.position().top; _val = parseFloat($li.height()) + parseFloat($li.css("marginTop")) + parseFloat($li.css("marginBottom")); if (range == -_val) { origin = $li.detach(); opt.list.append(origin).css("top", range + _val) } if (opt.el.height() <= opt.list.height()) { opt.list.css("top", --opt.list.position().top) } } else { var lenTotal = 0; opt.list.find("li").each(function () { lenTotal += parseFloat($(this).width()) + parseFloat($(this).css("marginRight")) + parseFloat($(this).css("marginLeft")) }); opt.list.css("width", lenTotal); range = opt.list.position().left; _val = parseFloat($li.width()) + parseFloat($li.css("marginRight")) + parseFloat($li.css("marginLeft")); if (range == -_val) { origin = $li.detach(); opt.list.append(origin).css("left", range + _val) } if (opt.el.width() <= opt.list.width()) { opt.list.css("left", --opt.list.position().left); } } timer = window.setTimeout(move, opt.time) } function clear() { clearTimeout(timer); timer = null } move(); opt.el.hover(function () { clear() }, function () { move() }) }, getDate:function (a,b){ //获取当前日期 //a表示年月日直接的分隔符,b表示时分秒之间的分隔符 var dateStr="", nowT=new Date(), nowYear=nowT.getFullYear(), nowMonth=nowT.getMonth() + 1, nowDay=nowT.getDate(), nowHours=nowT.getHours(), nowMinites=nowT.getMinutes(), nowSeconds=nowT.getSeconds(); if(a){ dateStr= nowYear + a + method.zero(nowMonth) + a + method.zero(nowDay) + " " + method.zero(nowHours) + b + method.zero(nowMinites) + b + method.zero(nowSeconds); }else{ dateStr= nowYear + "年" + method.zero(nowMonth) + "月" + method.zero(nowDay) + "日" + " " + method.zero(nowHours) + ":" + method.zero(nowMinites) + ":" + method.zero(nowSeconds); } return dateStr }, showMenu:function(a,b,$this){ //多级菜单方法 //有ul子元素的li都有class名a //点击事件一般给clss名为a的直接子元素即ul的兄弟元素添加 //点击的时候切换li的class名b,有class名b则显示其直接子元素ul if($this.parent(a).hasClass(b)){ $this.parent(a).removeClass(b).find(a).removeClass(b) }else{ $this.parent(a).addClass(b) } }, countDown:function (date,ele,str) { //倒计时方法 //date为截止日期,传入日期的时候年月日直接必须用/,否则IE不兼容 //ele表示用于显示时间的元素,str表示毫秒差小于等于0时元素内显示的内容 var timer; timer=window.setInterval(function () { var endTime = new Date(date), nowTime = new Date(), spanTime = endTime.getTime() - nowTime.getTime(), day = Math.floor(spanTime / (1000 * 60 * 60 * 24)), hours = Math.floor(spanTime / (1000 * 60 * 60)) % 24, minutes = Math.floor(spanTime / (1000 * 60)) % 60, seconds = Math.floor(spanTime / 1000) % 60; if (day > 0 || hours > 0 || minutes > 0 || seconds > 0) { var strT = '<span class="timer" >' + method.zero(day) + '天' + method.zero(hours) + '小时' + method.zero(minutes) + '分' + method.zero(seconds) + '秒'; ele.html(strT); } else { ele.html(str); clearInterval(timer); } }, 1000) }, numberScroll:function (a,url,list,num){ //数字滚动效果:一组数字从左至右依次滚落 //每一个数字模块list用一个ul模块包裹,而包裹所有数字模块list的容器就是a //这种效果需要直接执行此函数 还需要给window绑个scroll事件 var clientH = $(window).height(), $scroll = $(window).scrollTop(), $height = a.height(), $off = a.offset().top; if ($off + $height - $scroll >$height && $off + $height - $scroll <= clientH) { $.post(url,function(data){ var flag=32,data1=data.data,ary=data1.split(""),_len=ary.length,ary1=[]; if(_len < num){ var _dif = num - _len,aryStr="0"; for(var j = 0;j < _dif;j++){ ary1.unshift(aryStr); } } ary= $.merge(ary1,ary); /* var ary1=Number(ary[0]),ary2=Number(ary[1]),ary3=Number(ary[2]),ary4=Number(ary[3]),ary5=Number(ary[4]); list.eq(0).animate({top:-ary1*flag+"px"},500); list.eq(1).delay(500).animate({top:-ary2*flag+"px"},500); list.eq(2).delay(800).animate({top:-ary3*flag+"px"},500); list.eq(3).delay(1000).animate({top:-ary4*flag+"px"},500); list.eq(4).delay(1000).animate({top:-ary5*flag+"px"},500);*/ $.each(ary,function(i,item){ var aryI="ary"+i; aryI=Number(ary[i]); if(i==0){ list.eq(i).animate({top:-aryI*flag+"px"},500) }else{ list.eq(i).delay(500 + i*300).animate({top:-aryI*flag+"px"},500) } }) }); }else{ list.stop(2000).css("top",0) } }, versionRandom:function(){ //给link和script添加随机的版本号 $("link,script").each(function(){ var t=Math.random().toFixed(4); if($(this).attr("src")){ var $src=$(this).attr("src"); $(this).attr("src",$src+"?v="+t) }else if($(this).attr("href")){ var $href=$(this).attr("href"); $(this).attr("href",$href+"?v="+t) } }) }, qqRoll:function (ele,time){ //类似于qq的浮动框 //ele用绝对定位定位在屏幕的最中间,left或right值自定义 //需要给window绑定scroll事件实现动态效果 var $win=$(window).height(), $scroll=$(document).scrollTop(), $height=ele.height(); ele.animate({"top":$win/2+$scroll-$height/2},time) }, noCopy:function(){ //禁止密码框复制/剪切/粘贴 $("input:password").on("copy cut paste", function (e) { return false; }) }, paraSwitch:function(para,className,num,more,contract,a){ //显示段落中的一部分文字,其余用...代替 //当点击段落中的更多按钮时,显示全部内容。否则为收缩。more表示更多 contract表示收缩 //参数a表示是否有a标签 如果有的话则传0 没有的话传其他任何值均可 var $text=para.find("p").html(); var $text1=$text.substr(0,num)+"..."; para.find("p").html($text1); if(a == 0){ para.find("a").html(more); para.find("a").on("click",function(e){ $(e.currentTarget).parent().toggleClass(className); if(para.hasClass(className)){ para.find("p").html($text1); para.find("a").html(more); }else{ para.find("p").html($text); para.find("a").html(contract); } }) } }, layerImg:function (ele,eleBg,url){ //图片弹出层 var $con=ele; $con.find("img").attr("src",url); $con.find("img").on("load",function(){ var $conH=$(this).height(), $conW=$(this).width(), $winW=$(window).width(), $winH=$(window).height(); eleBg.css({"display":"block"}); if($conH > $winH){ $(this).css({height:$winH,display:"block",top:"0",marginTop:"0",marginLeft:-$conW/2}); }else if($conW > $winW){ $(this).css({width:"100%",display:"block",top:"50%",marginTop:-$conH/2,left:0,marginLeft:0}); } else{ $(this).css({display:"block",top:"50%",marginTop:-$conH/2,marginLeft:-$conW/2}); } }) }, layerImgClose:function(ele,$this){ //图片弹出层的关闭事件,关闭事件绑定给半透明的背景 $this.siblings(ele).find("img").css("display","none"); $this.css("display","none"); }, selectBoxOpen:function(url,$this,param){ //普通下拉框 显示下拉框 //url表示下拉框内容的存放路径 //param表示json文件中的属性名 //对于不可用的select框,只需给drop-down添加class名disabled即可 if($this.parents(".drop-down").hasClass("disabled") == false){ $.post(url,function(data){ var $span=$this.html(),_eq; var _ul="",oUl=$this.siblings("ul"); _ul+="<ul>"; if(param){ $.each(data[param],function(i,item){ _ul+="<li title='"+item+"'>"+item+"</li>"; if($span == item){ _eq=i; return _eq } }); }else{ $.each(data,function(i,item){ _ul+="<li title="+item+">"+item+"</li>"; if($span == item){ _eq=i; return _eq } }); } _ul+="</ul>"; if(oUl.length > 0){ oUl.replaceWith(_ul); }else{ $this.parents(".drop-down").append(_ul); } $this.parents(".drop-down").find("li").eq(_eq).addClass("sel").siblings().removeClass("sel"); oUl=$this.siblings("ul"); var _ulH=oUl.height(),spanH=$this.height(),_scrollT=$(window).scrollTop(),_winH=$(window).height(),_offT=$this.offset().top,$dropDown=$(".drop-down"); if(_winH - _offT + _scrollT - spanH - 2 >= _ulH){ oUl.css({top:"31px","border":"1px solid #ccc",borderTop:"none",bottom:"auto"}) }else{ oUl.css({bottom:"31px","border":"1px solid #ccc",borderBottom:"none",top:"auto"}) } $("div").filter(".drop-down").not($this.parents('.drop-down')).removeClass("act"); $this.parents(".drop-down").toggleClass("act"); $this.parents(".drop-down").on("click",function(e){ e.stopPropagation(); }); $("body").one("click",function(e){ //这里需要注意 有时body高度没有撑开,视觉上会有不执行的效果 $(".drop-down").removeClass("act"); }); }); } }, selectBoxClose:function(){ //普通下拉框 选中内容后 关闭下拉框 $('.drop-down').delegate("li","click",function(e){ var $text=$(this).html(); $(this).parents(".drop-down").removeClass("act"); $(this).parents(".drop-down").find("span").html($text); }) }, addE:function(a,b,oUl,c){ //省市区三级联动下拉框添加下拉列表内容 var _ul=""; _ul+="<ul>"; if(c){ $.each(a,function(i,item){ _ul+="<li title='"+item[c]+"'>"+item[c]+"</li>"; }); }else{ $.each(a,function(i,item){ _ul+="<li title='"+item+"'>"+item+"</li>"; }); } _ul+="</ul>"; if(oUl.length > 0){ oUl.replaceWith(_ul); }else{ b.append(_ul); /* var liStar="<li title='"+"请选择"+"'>"+"请选择"+"</li>"; b.find("ul").prepend(liStar);*/ } }, selectAreaO:function(url,$this){ //省市区三级联动显示下拉列表 //url表示下拉框内容的存放路径 //对于不可用的select框,只需给drop-down添加class名disabled即可 if($this.parents(".drop-down").hasClass("disabled") == false){ $.post(url,function(data){ if($this.parents(".drop-down").attr("id") == "province"){ if($("#province ul").length == 0){ method.addE(data,$this.parents(".drop-down"),$this.parents(".drop-down").find("ul"),"name"); } } oUl=$this.siblings("ul"); var _ulH=oUl.height(),spanH=$this.height(),_scrollT=$(window).scrollTop(),_winH=$(window).height(),_offT=$this.offset().top; if(_winH - _offT + _scrollT - spanH - 2 >= _ulH){ oUl.css({top:"31px","border":"1px solid #ccc",borderTop:"none",bottom:"auto"}) }else{ oUl.css({bottom:"31px","border":"1px solid #ccc",borderBottom:"none",top:"auto"}) } $("div").filter(".drop-down").not($this.parents('.drop-down')).removeClass("act"); $this.parents(".drop-down").toggleClass("act"); $this.parents(".drop-down").on("click",function(e){ e.stopPropagation(); }); $("body").one("click",function(e){ //这里需要注意 有时body高度没有撑开,视觉上会有不执行的效果 $(".drop-down").removeClass("act"); }); }); } }, selectAreaC:function(){ //省市区三级联动菜单显示下拉列表 $('.drop-down').delegate("li","click",function(e){ var province=$("#province"),city=$("#city"),town=$("#town"); var $text=$(this).html(), provinceText,cityText,cityItem; $(this).addClass("sel").siblings().removeClass("sel"); $(this).parents(".drop-down").removeClass("act"); $(this).parents(".drop-down").find("span").html($text); if($(this).parents(".drop-down").attr("id") == "province"){ provinceText=province.find("span").html(); $.post("js/area.json",function(data){ $.each(data,function(i,item){ if(provinceText == item.name){ cityItem=i; return cityItem } }); method.selectAreaRemove(city); method.selectAreaRemove(town); method.addE(data[cityItem].city,city,city.find("ul"),"name"); }); }else if($(this).parents(".drop-down").attr("id") == "city"){ provinceText=province.find("span").html(); cityText=city.find("span").html(); $.post("js/area.json",function(data){ $.each(data,function(i,item){ if(provinceText == item.name){ cityItem=i; return cityItem } }); method.selectAreaRemove(town); $.each(data[cityItem].city,function(i,item){ if(cityText == item.name){ method.addE(item.area,town,town.find("ul")); } }); }); } }) }, selectAreaRemove:function(ele){ //省市区三级联动菜单移除下拉列表 ele.find("span").html("请选择"); ele.find("ul").remove(); }, baiDu_push:function(){ //百度自动链接推送 var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); }, lessThenIE8:function () { //判断是否为IE8及以下,执行的时候,如果低于if8,则if(lessThenIE8) var UA = navigator.userAgent, isIE = UA.indexOf('MSIE') > -1, v = isIE ? /\d+/.exec(UA.split(';')[1]) : 'no ie'; return v <= 8; }(), layer:function (dom,callback1,callback2){ //弹框插件升级版 var body = $("body"); var mask = $("<div class='mask'></div>"); var mskCont = $(dom); body.append(mask); body.append(mskCont); var focusipt = body.find("input:focus"); if(focusipt.length){focusipt.blur();} body.addClass("over_hidden"); mskCont.css("margin","-"+(mskCont.height()/2)+"px -"+(mskCont.width()/2)+"px"); mskCont.hide().fadeIn(300); var times = mskCont.find(".title .close"),close_btn=$(".close_btn"); times.click(close); close_btn.click(close); mskCont.find(".layerCancel").click(function(){times.click();}); mskCont.find(".layerConfirm").click(function(){sucCallBack();}); function close(){ var timer=null; mskCont.removeClass('showAlert').addClass("hideAlert"); timer=setTimeout(function(){ clearTimeout(timer); mask.remove(); mskCont.remove(); body.removeClass("over_hidden"); if(callback1){callback1();} return false; },200); } function sucCallBack(){ if(callback2){callback2();} return false; } }, layerAlert:function(str,type,callback,title){ var tit = title?title:"提示"; var dom = "<div class=\"layerContent showAlert\" data-animation='"+type+"'>"+ "<div class=\"title\"><span>"+tit+"</span><a class=\"close\">×</a></div>"+ "<div class=\"cont\">"+str+"</div>"+ "<div class=\"layerFoot\"><input type=\"button\" class=\"layerConfirm\" value=\"确定\"/></div>"+ "</div>"; method.layer(dom,callback,callback); }, layerConfirm:function(str,type,callback1,callback2){ var dom = "<div class=\"layerContent showAlert\" data-animation='"+type+"'>"+ "<div class=\"title\"><span>提示</span><a class=\"close\">×</a></div>"+ "<div class=\"cont\">"+str+"</div>"+ "<div class=\"layerFoot\">"+ "<input type=\"button\" class=\"layerConfirm\" value=\"确定\"/>"+ "<input type=\"button\" class=\"layerCancel\" value=\"取消\"/>"+ "</div>"+ "</div>"; method.layer(dom,callback1,callback2); }, layerLoad:function(url,type,title,callback,onload){ $.get(url,{},function(data){ if(!title){title="";} var dom; if(title == "noTitle"){ dom = "<div class=\"layerContent showAlert\" data-animation='"+type+"'><div class=\"noTitle\"><a class=\"close_btn\">×</a></div>"+data+"</div>"; }else{ dom = "<div class=\"layerContent showAlert\" data-animation='"+type+"'><div class=\"title\"><span>"+title+"</span><a class=\"close\">×</a></div>"+data+"</div>"; } method.layer(dom,callback,false); if(onload){onload();} }); }, layerClose:function(){ var mask = $(".mask:last"), layerContent = $(".layerContent:last"), timer=null; layerContent.removeClass('showAlert').addClass("hideAlert"); timer=setTimeout(function(){ if(mask&&mask.length){ mask.remove(); $("body").removeClass("over_hidden"); if(layerContent.find("iframe").length){layerContent.find("iframe").remove();} if(window.CollectGarbage){CollectGarbage();} layerContent.remove(); } },200) } };
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*从上到下*/ @keyframes slideFromTop { 0% { top: 0; } 100% { top: 50%; } } @-webkit-keyframes slideFromTop { 0% { top: 0; } 100% { top: 50%; } } @-moz-keyframes slideFromTop { 0% { top: 0; } 100% { top: 50%; } } @-ms-keyframes slideFromTop { 0% { top: 0; } 100% { top: 50%; } } @-o-keyframes slideFromTop { 0% { top: 0; } 100% { top: 50%; } } @keyframes hideFromTop { 0% { top: 50%; } 100% { top:0; opacity: 0; } } @-webkit-keyframes hideFromTop { 0% { top: 50%; } 100% { top:0; opacity: 0; } } @-moz-keyframes hideFromTop { 0% { top: 50%; } 100% { top:0; opacity: 0; } } @-ms-keyframes hideFromTop { 0% { top: 50%; } 100% { top:0; opacity: 0; filter:Alpha(opacity=0) } } @-o-keyframes hideFromTop { 0% { top: 50%; } 100% { top:0; opacity: 0; } } /*从下到上*/ @keyframes slideFromBottom { 0% { top: 80%; } 100% { top: 50%; } } @-webkit-keyframes slideFromBottom { 0% { top: 80%; } 100% { top: 50%; } } @-moz-keyframes slideFromBottom { 0% { top: 80%; } 100% { top: 50%; } } @-ms-keyframes slideFromBottom { 0% { top: 80%; } 100% { top: 50%; } } @-o-keyframes slideFromBottom { 0% { top: 80%; } 100% { top: 50%; } } @keyframes hideFromBottom { 0% { top: 50%; } 100% { top: 80%; opacity: 0; } } @-webkit-keyframes hideFromBottom { 0% { top: 50%; } 100% { top: 80%; opacity: 0; } } @-moz-keyframes hideFromBottom { 0% { top: 50%; } 100% { top: 80%; opacity: 0; } } @-ms-keyframes hideFromBottom { 0% { top: 50%; } 100% { top: 80%; opacity: 0; filter:Alpha(opacity=0) } } @-o-keyframes hideFromBottom { 0% { top: 50%; } 100% { top: 80%; opacity: 0; } } /*震动显示*/ @keyframes showSweetAlert { 0% { transform: scale(0.5); } 45% { transform: scale(1.05); } 80% { transform: scale(.95); } 100% { transform: scale(1); } } @-webkit-keyframes showSweetAlert { 0% { -webkit-transform: scale(0.5); } 45% { -webkit-transform: scale(1.05); } 80% { -webkit-transform: scale(.95); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes showSweetAlert { 0% { -moz-transform: scale(0.5); } 45% { -moz-transform: scale(1.05); } 80% { -moz-transform: scale(.95); } 100% { -moz-transform: scale(1); } } @-ms-keyframes showSweetAlert { 0% { -ms-transform: scale(0.5); } 33% { -ms-transform: scale(1.05); } 66% { -ms-transform: scale(.95); } 100% { -ms-transform: scale(1); } } @-o-keyframes showSweetAlert { 0% { -o-transform: scale(0.5); } 45% { -o-transform: scale(1.05); } 80% { -o-transform: scale(.95); } 100% { -o-transform: scale(1); } } @keyframes hideSweetAlert { 0% { transform: scale(1); } 45% { transform: scale(1.05); } 80% { transform: scale(.95); } 100% { transform: scale(0); opacity: 0; } } @-webkit-keyframes hideSweetAlert { 0% { -webkit-transform: scale(1); } 45% { -webkit-transform: scale(1.05); } 80% { -webkit-transform: scale(.95); } 100% { -webkit-transform: scale(0); opacity: 0; } } @-moz-keyframes hideSweetAlert { 0% { -moz-transform: scale(1); } 45% { -moz-transform: scale(1.05); } 80% { -moz-transform: scale(.95); } 100% { -moz-transform: scale(0); opacity: 0; } } @-ms-keyframes hideSweetAlert { 0% { -ms-transform: scale(1); } 45% { -ms-transform: scale(1.05); } 80% { -ms-transform: scale(.95); } 100% { -ms-transform: scale(0); opacity: 0; filter:Alpha(opacity=0) } } @-o-keyframes hideSweetAlert { 0% { -o-transform: scale(1); } 45% { -o-transform: scale(1.05); } 80% { -o-transform: scale(.95); } 100% { -o-transform: scale(0); opacity: 0; } } /*渐入*/ @keyframes layerFadeIn{ 0% { opacity: 0; transform: scale(.5) } 100% { opacity: 1; transform: scale(1) } } @-webkit-keyframes layerFadeIn{ 0% { opacity: 0; -webkit-transform: scale(.5) } 100% { opacity: 1; -webkit-transform: scale(1) } } @-moz-keyframes layerFadeIn{ 0% { opacity: 0; -moz-transform: scale(.5) } 100% { opacity: 1; -moz-transform: scale(1) } } @-ms-keyframes layerFadeIn{ 0% { opacity: 0; -ms-transform: scale(.5); filter:Alpha(opacity=0) } 100% { opacity: 1; -ms-transform: scale(1); filter:Alpha(opacity=100) } } @-o-keyframes layerFadeIn{ 0% { opacity: 0; -o-transform: scale(.5) } 100% { opacity: 1; -o-transform: scale(1) } } @keyframes hideFadeIn{ 0% { opacity: 1; transform: scale(1) } 100% { transform: scale(.5); opacity: 0; } } @-webkit-keyframes hideFadeIn{ 0% { opacity: 1; -webkit-transform: scale(1) } 100% { -webkit-transform: scale(.5); opacity: 0; } } @-moz-keyframes hideFadeIn{ 0% { opacity: 1; -moz-transform: scale(1) } 100% { -moz-transform: scale(.5); opacity: 0; } } @-ms-keyframes hideFadeIn{ 0% { opacity: 1; -ms-transform: scale(1) } 100% { -ms-transform: scale(.5); opacity: 0; filter:Alpha(opacity=0) } } @-o-keyframes hideFadeIn{ 0% { opacity: 1; -webkit-transform: scale(1) } 100% { -webkit-transform: scale(.5); opacity: 0; } } @keyframes layer-fadeInUpBig { 0% { opacity: 0; transform: translateY(2000px) } 100% { opacity: 1; transform: translateY(0) } } @-webkit-keyframes layer-fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px) } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @-moz-keyframes layer-fadeInUpBig { 0% { opacity: 0; -moz-transform: translateY(2000px); transform: translateY(2000px) } 100% { opacity: 1; -moz-transform: translateY(0); transform: translateY(0) } } @-ms-keyframes layer-fadeInUpBig { 0% { opacity: 0; -ms-transform: translateY(2000px); transform: translateY(2000px); filter:Alpha(opacity=0) } 100% { opacity: 1; -ms-transform: translateY(0); transform: translateY(0); filter:Alpha(opacity=100) } } @-o-keyframes layer-fadeInUpBig { 0% { opacity: 0; -o-transform: translateY(2000px); transform: translateY(2000px) } 100% { opacity: 1; -o-transform: translateY(0); transform: translateY(0) } } @keyframes hide-fadeInUpBig { 0% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(2000px) } } @-webkit-keyframes hide-fadeInUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px) } } @-moz-keyframes hide-fadeInUpBig { 0% { opacity: 1; -moz-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -moz-transform: translateY(2000px); transform: translateY(2000px) } } @-ms-keyframes hide-fadeInUpBig { 0% { opacity: 1; -ms-transform: translateY(0); transform: translateY(0); filter:Alpha(opacity=100) } 100% { opacity: 0; -ms-transform: translateY(2000px); transform: translateY(2000px); filter:Alpha(opacity=0) } } @-o-keyframes hide-fadeInUpBig { 0% { opacity: 1; -o-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -o-transform: translateY(2000px); transform: translateY(2000px) } } /*翻转*/ @-webkit-keyframes layer-rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg) } 100% { opacity: 1; -webkit-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } } @keyframes layer-rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg) } 100% { opacity: 1; transform: translateX(0) rotate(0) } } @-moz-keyframes layer-rollIn { 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg) } 100% { opacity: 1; -moz-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } } @-ms-keyframes layer-rollIn { 0% { opacity: 0; -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); filter:Alpha(opacity=0) } 100% { opacity: 1; -ms-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0); filter:Alpha(opacity=100) } } @-o-keyframes layer-rollIn { 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg) } 100% { opacity: 1; -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } } @-webkit-keyframes hide-rollIn { 0% { opacity: 1; -webkit-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } 100% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg) } } @keyframes hide-rollIn { 0% { opacity: 1; transform: translateX(0) rotate(0) } 100% { opacity: 0; transform: translateX(-100%) rotate(-120deg) } } @-moz-keyframes hide-rollIn { 0% { opacity: 1; -moz-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } 100% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg) } } @-ms-keyframes hide-rollIn { 0% { opacity: 1; -ms-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0); filter:Alpha(opacity=100) } 100% { opacity: 0; -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); filter:Alpha(opacity=0) } } @-o-keyframes hide-rollIn { 0% { opacity: 1; -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } 100% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg) } } /*渐入*/ @keyframes layer-fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-webkit-keyframes layer-fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-moz-keyframes layer-fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-o-keyframes layer-fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-ms-keyframes layer-fadeIn { 0% { opacity: 0; filter:Alpha(opacity=0) } 100% { opacity: 1; filter:Alpha(opacity=100) } } @keyframes hide-fadeIn { 0% { opacity: 1 } 100% { opacity: 0 } } @-webkit-keyframes hide-fadeIn { 0% { opacity: 1 } 100% { opacity: 0 } } @-moz-keyframes hide-fadeIn { 0% { opacity: 1 } 100% { opacity: 0 } } @-o-keyframes hide-fadeIn { 0% { opacity: 1 } 100% { opacity: 0 } } @-ms-keyframes hide-fadeIn { 0% { opacity: 1 } 100% { opacity: 0; filter:Alpha(opacity=0) } } /*晃动*/ @-webkit-keyframes layer-shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px) } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px) } } @keyframes layer-shake { 0%, 100% { transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px) } 20%, 40%, 60%, 80% { transform: translateX(10px) } } @-moz-keyframes layer-shake { 0%, 100% { -moz-transform: translateX(0); transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-10px); transform: translateX(-10px) } 20%, 40%, 60%, 80% { -moz-transform: translateX(10px); transform: translateX(10px) } } @-ms-keyframes layer-shake { 0%, 100% { -ms-transform: translateX(0); transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -ms-transform: translateX(-10px); transform: translateX(-10px) } 20%, 40%, 60%, 80% { -ms-transform: translateX(10px); transform: translateX(10px) } } @-o-keyframes layer-shake { 0%, 100% { -o-transform: translateX(0); transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -o-transform: translateX(-10px); transform: translateX(-10px) } 20%, 40%, 60%, 80% { -o-transform: translateX(10px); transform: translateX(10px) } } @-webkit-keyframes hide-shake { 0%, 100% { -webkit-transform: translateX(10px); transform: translateX(10px) } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px) } 20%, 40%, 60%, 80% { -webkit-transform: translateX(0); transform: translateX(0) } 100%{ opacity: 0; } } @keyframes hide-shake { 0%, 100% { transform:translateX(10px) } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px) } 20%, 40%, 60%, 80% { transform: translateX(0) } 100%{ opacity: 0; } } @-moz-keyframes hide-shake { 0%, 100% { -moz-transform: translateX(10px); transform: translateX(10px) } 10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-10px); transform: translateX(-10px) } 20%, 40%, 60%, 80% { -moz-transform: translateX(0); transform: translateX(0) } 100%{ opacity: 0; } } @-ms-keyframes hide-shake { 0%, 100% { -ms-transform: translateX(10px); transform: translateX(10px) } 10%, 30%, 50%, 70%, 90% { -ms-transform: translateX(-10px); transform: translateX(-10px) } 20%, 40%, 60%, 80% { -ms-transform: translateX(0); transform: translateX(0) } 100%{ opacity: 0; filter:Alpha(opacity=0) } } @-o-keyframes hide-shake { 0%, 100% { -o-transform: translateX(10px); transform: translateX(10px) } 10%, 30%, 50%, 70%, 90% { -o-transform: translateX(-10px); transform: translateX(-10px) } 20%, 40%, 60%, 80% { -o-transform: translateX(0); transform: translateX(0) } 100%{ opacity: 0; } } /*扩展放大*/ @keyframes layer-spread { 0%{ transform:scaleX(0); opacity: 0; } 100% { transform:scaleX(1); opacity: 1; } } @-webkit-keyframes layer-spread { 0%{ -webkit-transform:scaleX(0); opacity: 0; } 100% { -webkit-transform:scaleX(1); opacity: 1; } } @-moz-keyframes layer-spread { 0%{ -moz-transform:scaleX(0); opacity: 0; } 100% { -moz-transform:scaleX(1); opacity: 1; } } @-o-keyframes layer-spread { 0%{ -o-transform:scaleX(0); opacity: 0; } 100% { -o-transform:scaleX(1); opacity: 1; } } @-ms-keyframes layer-spread { 0%{ -ms-transform:scaleX(0); opacity: 0; filter:Alpha(opacity=0) } 100% { -ms-transform:scaleX(1); opacity: 1; filter:Alpha(opacity=100) } } @keyframes hide-spread { 0%{transform:scaleX(1)} 50%{transform:scaleX(.5)} 100%{transformX:scaleX(0%);opacity:0;} } @-webkit-keyframes hide-spread { 0%{-webkit-transform:scaleX(1)} 50%{-webkit-transform:scaleX(.5)} 100%{-webkit-transform:scaleX(0);opacity:0;} } @-moz-keyframes hide-spread { 0%{-moz-transform:scaleX(1)} 50%{-moz-transform:scaleX(.5)} 100%{-moz-transform:scaleX(0);opacity:0;} } @-ms-keyframes hide-spread { 0%{-ms-transform:scaleX(1)} 50%{-ms-transform:scaleX(.5)} 100%{-ms-transform:scaleX(0);opacity:0;filter:Alpha(opacity=0)} } .showAlert[data-animation=layerFadeIn] { animation: layerFadeIn .3s; -webkit-animation: layerFadeIn .3s; -moz-animation: layerFadeIn .3s; -ms-animation: layerFadeIn .3s; -o-animation: layerFadeIn .3s; } .showAlert[data-animation=showSweetAlert] { animation: showSweetAlert .3s; -webkit-animation: showSweetAlert .3s; -moz-animation: showSweetAlert .3s; -ms-animation: showSweetAlert .3s; -o-animation: showSweetAlert .3s; } .showAlert[data-animation=none] { animation: none; -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; } .showAlert[data-animation=slideFromTop] { animation: slideFromTop .3s; -webkit-animation: slideFromTop .3s; -moz-animation: slideFromTop .3s; -ms-animation: slideFromTop .3s; -o-animation: slideFromTop .3s; } .showAlert[data-animation=slideFromBottom] { animation: slideFromBottom .2s; -webkit-animation: slideFromBottom .2s; -moz-animation: slideFromBottom .2s; -ms-animation: slideFromBottom .2s; -o-animation: slideFromBottom .2s; } .showAlert[data-animation=layer-fadeInUpBig] { animation: layer-fadeInUpBig .2s; -webkit-animation: layer-fadeInUpBig .2s; -moz-animation: layer-fadeInUpBig .2s; -ms-animation: layer-fadeInUpBig .2s; -o-animation: layer-fadeInUpBig .2s; } .showAlert[data-animation=layer-rollIn] { animation: layer-rollIn .3s; -webkit-animation: layer-rollIn .3s; -moz-animation: layer-rollIn .3s; -ms-animation: layer-rollIn .3s; -o-animation: layer-rollIn .3s; } .showAlert[data-animation=layer-fadeIn] { animation: layer-fadeIn .3s; -webkit-animation: layer-fadeIn .3s; -moz-animation: layer-fadeIn .3s; -ms-animation: layer-fadeIn .3s; -o-animation: layer-fadeIn .3s; } .showAlert[data-animation=layer-shake] { animation: layer-shake .3s; -webkit-animation:layer-shake .3s; -moz-animation: layer-shake .3s; -ms-animation: layer-shake .3s; -o-animation: layer-shake .3s; } .showAlert[data-animation=layer-spread] { animation: layer-spread .2s; -webkit-animation:layer-spread .2s; -moz-animation: layer-spread .2s; -ms-animation: layer-spread .2s; -o-animation: layer-spread .2s; } .hideAlert[data-animation=layer-spread] { animation: hide-spread .5s forwards; -webkit-animation:hide-spread .5s forwards; -moz-animation: hide-spread .5s forwards; -ms-animation: hide-spread .5s forwards; -o-animation: hide-spread .5s forwards; } .hideAlert[data-animation=slideFromTop] { animation: hideFromTop .2s forwards; -webkit-animation:hideFromTop .2s forwards; -moz-animation: hideFromTop .2s forwards; -ms-animation: hideFromTop .2s forwards; -o-animation: hideFromTop .2s forwards; } .hideAlert[data-animation=slideFromBottom] { animation: hideFromBottom .2s forwards; -webkit-animation:hideFromBottom .2s forwards; -moz-animation: hideFromBottom .2s forwards; -ms-animation: hideFromBottom .2s forwards; -o-animation: hideFromBottom .2s forwards; } .hideAlert[data-animation=showSweetAlert] { animation: hideSweetAlert .2s forwards; -webkit-animation:hideSweetAlert .2s forwards; -moz-animation: hideSweetAlert .2s forwards; -ms-animation: hideSweetAlert .2s forwards; -o-animation: hideSweetAlert .2s forwards; } .hideAlert[data-animation=layerFadeIn] { animation: hideFadeIn .2s forwards; -webkit-animation:hideFadeIn .2s forwards; -moz-animation: hideFadeIn .2s forwards; -ms-animation: hideFadeIn .2s forwards; -o-animation: hideFadeIn .2s forwards; } .hideAlert[data-animation=layer-fadeIn] { animation: hide-fadeIn .2s forwards; -webkit-animation:hide-fadeIn .2s forwards; -moz-animation: hide-fadeIn .2s forwards; -ms-animation: hide-fadeIn .2s forwards; -o-animation: hide-fadeIn .2s forwards; } .hideAlert[data-animation=layer-fadeInUpBig] { animation: hide-fadeInUpBig .2s forwards; -webkit-animation:hide-fadeInUpBig .2s forwards; -moz-animation: hide-fadeInUpBig .2s forwards; -ms-animation: hide-fadeInUpBig .2s forwards; -o-animation: hide-fadeInUpBig .2s forwards; } .hideAlert[data-animation=layer-rollIn] { animation: hide-rollIn .2s forwards; -webkit-animation:hide-rollIn .2s forwards; -moz-animation: hide-rollIn .2s forwards; -ms-animation: hide-rollIn .2s forwards; -o-animation: hide-rollIn .2s forwards; } .hideAlert[data-animation=layer-shake] { animation: hide-shake .2s forwards; -webkit-animation:hide-shake .2s forwards; -moz-animation: hide-shake .2s forwards; -ms-animation: hide-shake .2s forwards; -o-animation: hide-shake .2s forwards; } .msg-layer-bg { width: 100%; z-index: 999; position: fixed; background: #000; opacity: 0.4; top: 0; height: 100%; filter: alpha(opacity=50); } .msg-layer{ z-index: 9999; position: fixed; left: 50%; top: 50%; text-align:center; opacity: 1; filter: alpha(opacity=100); padding: 0 10px 10px; background:#fff; border-radius: 5px; max-width: 800px; min-width: 300px; } .msg-con{ padding: 10px; word-break: break-all; } .layer-close{ display: none; position: absolute; right: 10px; top: 0; font-size: 32px; color: #d02f30; height: 30px; line-height: 30px; cursor: pointer; } .msg-layer>h5{ font-size:18px; line-height:38px; border-bottom:1px solid #ccc; } .layer-btn{ padding:16px 0 10px; text-align: center; } .layer-btn>input{ display:none; width:100px; height:36px; line-height:36px; text-align: center; color:#fff; font-size: 14px; border-radius: 5px; cursor: pointer; border:none; outline: none; } .layer-cancel{ background:#ccc9c9; } .layer-commit{ background:#50bce0; margin-left: 10px; } .msy-alert{ position: fixed; top: 50%; left: 50%; min-width: 260px; max-width: 500px; padding: 10px; text-align: center; line-height: 20px; font-size: 14px; color: #000; z-index: 99999; background: #fff; border:1px solid #bfbfbf; box-shadow:0 0 7px 0 #b5b3b3; -webkit-box-shadow:0 0 7px 0 #b5b3b3; -moz-box-shadow:0 0 7px 0 #b5b3b3; -ms-box-shadow:0 0 7px 0 #b5b3b3; -o-box-shadow:0 0 7px 0 #b5b3b3; }