JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】


Posted in jQuery onJuly 10, 2019

本文实例讲述了JavaScript实现的弹出遮罩层特效。分享给大家供大家参考,具体如下:

这篇给大家分享一个简单的遮罩层特效,先上效果图。

JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>查看,修改,删除</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style>
    table{
      width:500px;
      border:1px solid blue;
      border-collapse: collapse;
    }
    table th{
      border:1px solid blue;
      height:30px;
    }
    table td{
      border:1px solid blue;
      text-align:center;
      height:30px;
    }
    table td a {
      color:red;
    }
    div.proDiv{
      width:500px;
      position: absolute;
      left:50%;
      margin-left:-250px;
      padding:10px;
      border:1px solid red;
      top:100px;
      background: #fff;
      display: none;
      z-index: 3
    }
    div.proDiv p{
      border-bottom:1px solid red;
    }
    div.proDiv a.close{
      color:red;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>工作</th>
      <th>工资</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>22</td>
      <td>项目经理</td>
      <td>12000</td>
      <td>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="view">查看</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">删除</a>
      </td>
    </tr>
    <tr>
      <td>李四</td>
      <td>24</td>
      <td>前端工程师</td>
      <td>10000</td>
      <td>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="view">查看</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">删除</a>
      </td>
    </tr>
    <tr>
      <td>王五</td>
      <td>21</td>
      <td>java工程师</td>
      <td>12000</td>
      <td>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="view">查看</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">删除</a>
      </td>
    </tr>
  </table>
  <div class="proDiv">
    <p><strong>姓名:</strong><span></span></p>
    <p><strong>年龄:</strong><span></span></p>
    <p><strong>工作:</strong><span></span></p>
    <p><strong>工资:</strong><span></span></p>
    <a class="close" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >关闭</a>
  </div>
</body>
<script>
  //查看操作
  $('a.view').click(function(){
    //获取文档的宽和高
    var maskWidth = $(document).width();
    var maskHeight = $(document).height();
    //遮罩层初始化
    $('<div class="mask"></div>').appendTo($('body'));
    $('div.mask').css({
      'position':'absolute',
      'top':0,
      'left':0,
      'background':'black',
      'opacity':0.5,
      'width':maskWidth,
      'height':maskHeight,
      'z-index':2
    });
    var data = [];//保存数据的数组
    //将一行的数据添加到数据中
    $(this).parent().siblings().each(function(){
      data.push($(this).text())
    });
    //将内容显示到弹出层中
    $('div.proDiv').children().each(function(i){
      $(this).children('span').text(data[i]);
    });
    $('div.proDiv').show();//显示弹出层
    //关闭操作
    $('a.close').click(function(){
      $(this).parent().hide();
      $('div.mask').remove();
    });
  });
  //删除操作
  $('a.del').click(function(){
    $(this).parents('tr').remove();
  });
</script>
</html>

页面中有一个表格,一个隐藏的弹出层,当点击查看按钮,首先创建一个遮罩层,然后获取这一行中的数据,并把数据显示到弹出层中,最后把弹出层隐藏,点击关闭按钮关闭弹出层并关闭遮罩层。点击删除按钮把这个tr删除即可。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容可查看本站专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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

jQuery 相关文章推荐
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
JQuery实现图片轮播效果
May 08 jQuery
jQuery表单验证之密码确认
May 22 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 #jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 #jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 #jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 #jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 #jQuery
jQuery属性选择器用法实例分析
Jun 28 #jQuery
jQuery位置选择器用法实例分析
Jun 28 #jQuery
You might like
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
jQuery示例收集
2010/11/05 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
javascript编写简易计算器
2017/05/06 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
初步解析Python下的多进程编程
2015/04/28 Python
python计算方程式根的方法
2015/05/07 Python
python自定义异常实例详解
2017/07/11 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
Python帮你识破双11的套路
2019/11/11 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
Python运算符+与+=的方法实例
2021/02/18 Python
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
介绍一下write命令
2014/08/10 面试题
毕业实习评语
2014/02/10 职场文书
母婴店促销方案
2014/03/05 职场文书
校园演讲稿汇总
2014/05/21 职场文书
大学生求职信范文
2014/05/24 职场文书
红色旅游心得体会
2014/09/03 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
尼克胡哲观后感
2015/06/08 职场文书
小学语文教师研修日志
2015/11/13 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书