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


Posted in jQuery onMay 16, 2020

本文实例讲述了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 相关文章推荐
jQuery异步提交表单实例
May 30 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 #jQuery
JQuery表单元素取值赋值方法总结
May 12 #jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 #jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 #jQuery
基于JQuery实现页面定时弹出广告
May 08 #jQuery
JQuery复选框全选效果如何实现
May 08 #jQuery
JQuery省市联动效果实现过程详解
May 08 #jQuery
You might like
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
php判断是否为json格式的方法
2014/03/04 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
PDO::quote讲解
2019/01/29 PHP
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
Jquery中dialog属性小记
2010/09/03 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
微信小程序模板template简单用法示例
2018/12/04 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
JS实现横向轮播图(中级版)
2020/01/18 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
python实现分页效果
2017/10/25 Python
机器学习实战之knn算法pandas
2019/06/22 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
商务英语广告词大全
2014/03/18 职场文书
学生安全责任书
2014/04/15 职场文书
活动总结怎么写
2014/04/28 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
实例讲解Python中sys.argv[]的用法
2021/06/03 Python
如何Tomcat中使用ipv6地址
2022/05/06 Servers
服务器SVN搭建图文安装过程
2022/06/21 Servers