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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 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/03/20 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
Python多进程编程技术实例分析
2014/09/16 Python
对于Python中线程问题的简单讲解
2015/04/03 Python
pygame学习笔记(5):游戏精灵
2015/04/15 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
python最长回文串算法
2018/06/04 Python
python执行精确的小数计算方法
2019/01/21 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
英语专业学生个人求职信
2014/01/28 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
小学端午节活动总结
2015/02/11 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB