jquery+css3实现的经典弹出层效果示例
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要介绍了jquery+css3实现的经典弹出层效果,结合实例形式分析了jquery+css3实现弹出层具体原理、步骤与相关操作技巧,需要的朋友可以参考下
本文实例讲述了jquery+css3实现的弹出层效果。分享给大家供大家参考，具体如下：
可能出现的情况
1）一列都有，按顺序弹出对应的弹出层
2）只有单个一个弹出层
3）不按顺序不按规律随机弹出层
jquery 弹出层 解决 第一种情况
参考资料
引入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;}
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。
上一篇：JavaScript 类的封装操作示例详解
下一篇：js抽奖转盘实现方法分析