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

本文实例讲述了jquery+css3实现的弹出层效果。分享给大家供大家参考，具体如下：

可能出现的情况

1）一列都有，按顺序弹出对应的弹出层

2）只有单个一个弹出层

3）不按顺序不按规律随机弹出层

jquery 弹出层 解决 第一种情况

参考资料

移动端之“css3多动画弹框”

引入jquery

js代码 这里关闭用的css3效果实现

<script type="text/javascript">
  var w,h,classname;
  function getsrceenwh(){
    w = $(window).width();
    h = $(window).height();
    $('#dialogbg').width(w).height(h);
  }
 
  window.onresize = function(){
    getsrceenwh();
  }
  $(window).resize();
 
  $(function(){
    getsrceenwh();
 
    //显示弹框
    $('.solution_class a').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();
      });
    });
  });
</script>

html

<div id="dialogbg"></div>
  <div id="dialog" class="animated">
 
    <div class="dialogtop">
      <a href="javascript:;" rel="external nofollow" class="clasedialogbtn">关闭</a>
    </div>
  </div>

css

/*遮罩层*/
 
.animated{
  -webkit-animation-duration:1.4s;
  animation-duration:1.4s;
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both
}
 
@-webkit-keyframes bouncein{
  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)
  }
 
}
@keyframes bouncein{
  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-keyframes bounceindown {
  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);
  }
}
 
@keyframes bounceindown {
  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-keyframes bounceoutup {
  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);
  }
}
 
@keyframes bounceoutup {
  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-keyframes rollin {
  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);
  }
}
 
@keyframes rollin {
  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-keyframes flipinx {
  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;
  }
}
 
@keyframes flipinx {
  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: 0 auto;
  display: none;
  background-color: #ffffff;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -300px 0 0 -400px;
  z-index: 10000;
  border: 1px solid #ccc;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  box-shadow: 3px 2px 4px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 3px 2px 4px rgba(0, 0, 0, 0.2);
}
 
.dialogtop {
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px dotted #ccc;
  letter-spacing: 1px;
  padding: 10px 0;
  text-align: right;
}
 
.dialogico {
  width: 50px;
  height: 50px;
  position: absolute;
  top: -25px;
  left: 50%;
  margin-left: -25px;
}
 
.editinfos {
  padding: 15px 0;
}
 
.editinfos li {
  width: 90%;
  margin: 8px auto auto;
  text-align: center;
}
 
.ipt {
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  box-shadow: 0 0 3px #ccc inset;
  -webkit-box-shadow: 0 0 3px #ccc inset;
  margin-left: 5px;
}
 
.ipt:focus {
  outline: none;
  border-color: #66afe9;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
}
 
.submitbtn{width:90px;height:30px;line-height:30px;font-family:"微软雅黑","microsoft yahei";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 -3px 0 #2a6496 inset;-webkit-box-shadow: 0 -3px 0 #2a6496 inset;}