首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

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+css3实现的经典弹出层效果示例

- Author -

星耀学园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery表单设置值的方法
Jun 30 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 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
limit(1) 逻辑架构(1) Mysql报错(1) MYSQL函数(1) offset(1) turtle(1) 计时器(1) mysql.user(1) 绘图(1) 定时任务(2)
You might like
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
php中Snoopy类用法实例
2015/06/19 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
js计算页面刷新的次数
2009/07/20 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
jquery easyui使用心得
2014/07/07 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
Python3 中文文件读写方法
2018/01/23 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
python读取各种文件数据方法解析
2018/12/29 Python
详解用python生成随机数的几种方法
2019/08/04 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
ParcelABC西班牙：包裹运送和快递服务
2019/12/24 全球购物
抄作业检讨书
2014/02/17 职场文书
办理护照工作证明
2014/10/10 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL