jquery+css3实现的经典弹出层效果示例

2023-07-24 16:25:06 187

varw,h,className; functiongetSrceenWH(){ w=$(window).width(); h=$(window).height(); $('#dialogBg').width(w).height(h); } window.onresize=function(){ getSrceenWH(); } $(window).resize(); $(function(){ getSrceenWH(); //显示弹框 $('.solution_classa').click(function(){ className=$(this).attr('class'); $('#dialogBg').fadeIn(300); $('#dialog').removeAttr('class').addClass('animated'+className+'').fadeIn(); }); //关闭弹窗 $('.claseDialogBtn,#dialogBg').click(function(){ $('#dialogBg').fadeOut(300,function(){ $('#dialog').addClass('bounceOutUp').fadeOut(); }); }); });

/*遮罩层*/ .animated{ -webkit-animation-duration:1.4s; animation-duration:1.4s; -webkit-animation-fill-mode:both; animation-fill-mode:both } @-webkit-keyframesbounceIn{ 0%{ opacity:0; -webkit-transform:scale(.3); transform:scale(.3) } 50%{ opacity:1; -webkit-transform:scale(1.05); transform:scale(1.05) } 70%{ -webkit-transform:scale(.9); transform:scale(.9) } 100%{ opacity:1; -webkit-transform:scale(1); transform:scale(1) } } @keyframesbounceIn{ 0%{ opacity:0; -webkit-transform:scale(.3); -ms-transform:scale(.3); transform:scale(.3) } 50%{ opacity:1; -webkit-transform:scale(1.05); -ms-transform:scale(1.05); transform:scale(1.05) } 70%{ -webkit-transform:scale(.9); -ms-transform:scale(.9); transform:scale(.9) } 100%{ opacity:1; -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1) } } .bounceIn{ -webkit-animation-name:bounceIn; animation-name:bounceIn } @-webkit-keyframesbounceInDown{ 0%{ opacity:0; -webkit-transform:translateY(-2000px); transform:translateY(-2000px); } 60%{ opacity:1; -webkit-transform:translateY(30px); transform:translateY(30px); } 80%{ -webkit-transform:translateY(-10px); transform:translateY(-10px); } 100%{ -webkit-transform:translateY(0); transform:translateY(0); } } @keyframesbounceInDown{ 0%{ opacity:0; -webkit-transform:translateY(-2000px); -ms-transform:translateY(-2000px); transform:translateY(-2000px); } 60%{ opacity:1; -webkit-transform:translateY(30px); -ms-transform:translateY(30px); transform:translateY(30px); } 80%{ -webkit-transform:translateY(-10px); -ms-transform:translateY(-10px); transform:translateY(-10px); } 100%{ -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); } } .bounceInDown{ -webkit-animation-name:bounceInDown; animation-name:bounceInDown; } @-webkit-keyframesbounceOutUp{ 0%{ -webkit-transform:translateY(0); transform:translateY(0); } 20%{ opacity:1; -webkit-transform:translateY(20px); transform:translateY(20px); } 100%{ opacity:0; -webkit-transform:translateY(-2000px); transform:translateY(-2000px); } } @keyframesbounceOutUp{ 0%{ -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); } 20%{ opacity:1; -webkit-transform:translateY(20px); -ms-transform:translateY(20px); transform:translateY(20px); } 100%{ opacity:0; -webkit-transform:translateY(-2000px); -ms-transform:translateY(-2000px); transform:translateY(-2000px); } } .bounceOutUp{ -webkit-animation-name:bounceOutUp; animation-name:bounceOutUp; } @-webkit-keyframesrollIn{ 0%{ opacity:0; -webkit-transform:translateX(-100%)rotate(-120deg); transform:translateX(-100%)rotate(-120deg); } 100%{ opacity:1; -webkit-transform:translateX(0px)rotate(0deg); transform:translateX(0px)rotate(0deg); } } @keyframesrollIn{ 0%{ opacity:0; -webkit-transform:translateX(-100%)rotate(-120deg); -ms-transform:translateX(-100%)rotate(-120deg); transform:translateX(-100%)rotate(-120deg); } 100%{ opacity:1; -webkit-transform:translateX(0px)rotate(0deg); -ms-transform:translateX(0px)rotate(0deg); transform:translateX(0px)rotate(0deg); } } .rollIn{ -webkit-animation-name:rollIn; animation-name:rollIn; } @-webkit-keyframesflipInX{ 0%{ -webkit-transform:perspective(400px)rotateX(90deg); transform:perspective(400px)rotateX(90deg); opacity:0; } 40%{ -webkit-transform:perspective(400px)rotateX(-10deg); transform:perspective(400px)rotateX(-10deg); } 70%{ -webkit-transform:perspective(400px)rotateX(10deg); transform:perspective(400px)rotateX(10deg); } 100%{ -webkit-transform:perspective(400px)rotateX(0deg); transform:perspective(400px)rotateX(0deg); opacity:1; } } @keyframesflipInX{ 0%{ -webkit-transform:perspective(400px)rotateX(90deg); -ms-transform:perspective(400px)rotateX(90deg); transform:perspective(400px)rotateX(90deg); opacity:0; } 40%{ -webkit-transform:perspective(400px)rotateX(-10deg); -ms-transform:perspective(400px)rotateX(-10deg); transform:perspective(400px)rotateX(-10deg); } 70%{ -webkit-transform:perspective(400px)rotateX(10deg); -ms-transform:perspective(400px)rotateX(10deg); transform:perspective(400px)rotateX(10deg); } 100%{ -webkit-transform:perspective(400px)rotateX(0deg); -ms-transform:perspective(400px)rotateX(0deg); transform:perspective(400px)rotateX(0deg); opacity:1; } } .flipInX{ -webkit-backface-visibility:visible!important; -ms-backface-visibility:visible!important; backface-visibility:visible!important; -webkit-animation-name:flipInX; animation-name:flipInX; } /*-------------------华丽分割线-----------------------*/ /*-------------------华丽分割线-----------------------*/ #dialogBg{ width:100%; height:100%; background-color:#000000; opacity:.8; filter:alpha(opacity=60); position:fixed; top:0; left:0; z-index:9999; display:none; } #dialog{ width:800px; height:600px; margin:0auto; display:none; background-color:#ffffff; position:fixed; top:50%; left:50%; margin:-300px00-400px; z-index:10000; border:1pxsolid#ccc; border-radius:10px; -webkit-border-radius:10px; box-shadow:3px2px4pxrgba(0,0,0,0.2); -webkit-box-shadow:3px2px4pxrgba(0,0,0,0.2); } .dialogTop{ width:90%; margin:0auto; border-bottom:1pxdotted#ccc; letter-spacing:1px; padding:10px0; text-align:right; } .dialogIco{ width:50px; height:50px; position:absolute; top:-25px; left:50%; margin-left:-25px; } .editInfos{ padding:15px0; } .editInfosli{ width:90%; margin:8pxautoauto; text-align:center; } .ipt{ border:1pxsolid#ccc; padding:5px; border-radius:3px; -webkit-border-radius:3px; box-shadow:003px#cccinset; -webkit-box-shadow:003px#cccinset; margin-left:5px; } .ipt:focus{ outline:none; border-color:#66afe9; box-shadow:01px1pxrgba(0,0,0,0.075)inset,008pxrgba(102,175,233,0.6); -webkit-box-shadow:01px1pxrgba(0,0,0,0.075)inset,008pxrgba(102,175,233,0.6); } .submitBtn{width:90px;height:30px;line-height:30px;font-family:"微软雅黑","microsoftyahei";cursor:pointer;margin-top:10px;display:inline-block;border-radius:5px;-webkit-border-radius:5px;text-align:center;background-color:#428bca;color:#fff;box-shadow:0-3px0#2a6496inset;-webkit-box-shadow:0-3px0#2a6496inset;}

jquery+css3实现的经典弹出层效果示例

热门推荐

随机推荐