当前位置：移动技术网 > IT编程>开发语言>JavaScript > jquery+css3实现的经典弹出层效果示例

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

2020年06月13日 | 移动技术网IT编程 | 我要评论

自贡二手房信息,张玮和丁丁,九九小说阅读网

本文实例讲述了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;}

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

JS array数组检测方式解析

typeofvar arr = [1,2,3];console.log(typeof arr);//'object'数组的本质是一种特殊的对象，所以返回'obj... [阅读全文]
JS实现图片幻灯片效果代码实例

其效果是点击图片切换到下一张图片首先准备五张图片 <ul class="imge"> <li><img src="images/1... [阅读全文]
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解

大部分情况下object.getownpropertynames()与object.keys(obj)的功能是一样的，我们一般也是用来获取一个json对象中所有... [阅读全文]
js cavans实现静态滚动弹幕

本文实例为大家分享了js实现静态滚动弹幕的具体代码，供大家参考，具体内容如下<!doctype html><html lang="en">... [阅读全文]
JavaScript使用prototype属性实现继承操作示例

本文实例讲述了javascript使用prototype属性实现继承操作。分享给大家供大家参考，具体如下：js并没有显式的继承语法,在js中所有的对象都是obj... [阅读全文]
JavaScript直接调用函数与call调用的区别实例分析

本文实例讲述了javascript直接调用函数与call调用的区别。分享给大家供大家参考，具体如下：直接调用直接调用函数是最常见最普通的方式,直接以函数附加的... [阅读全文]
JS变量提升原理与用法实例浅析

本文实例讲述了js变量提升。分享给大家供大家参考，具体如下：该篇介绍什么是变量提升,写给像我一样的js新手看的简单来说变量提升就是 js会把var变量的声明自动... [阅读全文]
小程序分享链接onShareAppMessage的具体用法

onshareappmessage用法：只需要在button标签中加入open-type="share"，小程序ui就会自动识别分享链接功能<button... [阅读全文]
AutoJs实现刷宝短视频的思路详解

auto.js 是个基于 javascript 语言运行在android平台上的脚本框架。auto.js主要工作原理是基于辅助服务accessibilityse... [阅读全文]
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】

本文实例讲述了javascript设计模式--简单工厂模式。分享给大家供大家参考，具体如下：第一步，ajax操作接口（目的是起一个接口检测作用）（1）引入接口文... [阅读全文]

网友评论


验证码：

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

2020年06月13日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论