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

2024-09-27 01:20:18

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

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

代码：

<!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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

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

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

Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)

Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
JS遮罩层效果兼容ie firefox jQuery遮罩层

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt
jQuery+AJAX实现遮罩层登录验证界面（附源码）

JQuery遮罩层登录界面效果的实现,AJAX实现登录验证,文章尾有完整示例源码下载,欢迎大家学习研究. 操作系统:Windwos7 Ultimate 开发工具:Visual Studio 2010 数据库:Sql Server 2005 测试浏览器:IE8.FF3.6.8.Google Chrome (IE8中弹出登录层后会出现竖拉条,其他两种没有出现,那个竖拉条可以在JS中通过修改数值让其不出现,但是下面会出现白边,越来越觉得IE有点那个了......) 1.预览 1)登录前 2)点击登录显
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7

本屌丝最近工作要求重写网站所有代码,so...极其蛋疼的事情出现了,管我的人要求不能用网上的插件,oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能: 需求:网页遮罩层/弹出层,兼容IE6 幸好本屌丝以前聪明收集了个js的版本,so,自己改写成了jQuery插件形式的,方便以后使用. 屁话不多放,无码无真相! 复制代码代码如下: /******************************* * @name Layer跨浏览器兼容插件 v1.
JQuery 遮罩层实现(mask)实现代码

其中有mask()和unmask()这两个方法,这两个方法在指定的元素上添加一个遮罩层和一个提示消息实现,增加客户体验.由于最近做项目的时候,发现有时为了使用这一两个方法需要引入一个比较"庞大"的Extjs进来,觉得有点不划算,于是自己用jquery实现了一个比较简单mask.unmask方法来实现该效果.大家知道jquery是一个优秀的javascript框架,不但体积小而且使用方便,我现在逐渐将系统中使用Extjs实现的代码或组建全部更换成Jquery来实现.好了不多说,上我的代码
jQuery点击按钮弹出遮罩层且内容居中特效

本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出居中遮罩</title> <meta name="viewport" content="width=devi
jQuery阻止移动端遮罩层后页面滚动

css代码: .ovfHiden{overflow: hidden;height: 100%;} jquery: $(".header_right").click(function(){ $('html,body').addClass('ovfHiden'); //使网页不可滚动 $(".searchbox").show(); }) $(".yg-close").click(function(){ $('html,body').removeCla
Jquery实现遮罩层的方法

本文实例讲述了Jquery实现遮罩层的方法.分享给大家供大家参考.具体如下: 1.假设#main为页面body中的最外层Div标签 2.背景被遮罩后,显示的弹出窗(默认是不显示的,所包含的CSS这里就不贴了):  <div id="warning-dialog" class="status warning center-top no-display"> <p class="cl
jQuery实现弹出带遮罩层的居中浮动窗口效果

本文实例讲述了jQuery实现弹出带遮罩层的居中浮动窗口效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pop window</title> <style> *{ padding: 0; margin: 0; } .hide{ display: none
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:absolute;width:100%;left:50%;height:auto;z-index:100;background-color:#f5f5f5;border:1px #ddd solid;padding:1px;}</style><div id="bg" v-c

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

相关推荐

随机推荐