css弹出层外观,jquery+css3实现的经典弹出层效果示例

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

可能出现的情况

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

2)只有单个一个弹出层

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

jquery 弹出层 解决 第一种情况

参考资料

引入jquery

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

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();

});

});

});

HTML

关闭

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

希望本文所述对大家jQuery程序设计有所帮助。