弹出层效果

 

可能出现的情况

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:;" 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;}