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

jquery实现简单的遮罩层

Posted in Javascript onJanuary 08, 2016

本文实例讲解了jquery遮罩层，包括遮罩层的不同样式实现、mask实现遮罩层等，分享给大家供大家参考，具体内容如下

一、jQuery实现遮罩层的不同样式
1.1 背景半透明遮罩层样式
需要一个黑色（当然也可以其他）背景，且须设置为绝对定位，以下是项目中用到的css样式：

/* 半透明的遮罩层 */
#overlay {
  background: #000;
  filter: alpha(opacity=50); /* IE的透明度 */
  opacity: 0.5; /* 透明度 */
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 100; /* 此处的图层要大于页面 */
  display:none;
}

1.2 jQuery实现遮罩

/* 显示遮罩层 */
function showOverlay() {
  $("#overlay").height(pageHeight());
  $("#overlay").width(pageWidth());

  // fadeTo第一个参数为速度，第二个为透明度
  // 多重方式控制透明度，保证兼容性，但也带来修改麻烦的问题
  $("#overlay").fadeTo(200, 0.5);
}

/* 隐藏覆盖层 */
function hideOverlay() {
  $("#overlay").fadeOut(200);
}

/* 当前页面高度 */
function pageHeight() {
  return document.body.scrollHeight;
}

/* 当前页面宽度 */
function pageWidth() {
  return document.body.scrollWidth;
}

1.3 提示框
遮罩的目的无非让人无法操作内容，突出提示框，而提示框可参考上面的制作，z-index比遮罩层更高便可。主要问题是，如何控制提示框在浏览器居中。

/* 定位到页面中心 */
function adjust(id) {
  var w = $(id).width();
  var h = $(id).height();
  
  var t = scrollY() + (windowHeight()/2) - (h/2);
  if(t < 0) t = 0;
  
  var l = scrollX() + (windowWidth()/2) - (w/2);
  if(l < 0) l = 0;
  
  $(id).css({left: l+'px', top: t+'px'});
}

//浏览器视口的高度
function windowHeight() {
  var de = document.documentElement;

  return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
}

//浏览器视口的宽度
function windowWidth() {
  var de = document.documentElement;

  return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth
}

/* 浏览器垂直滚动位置 */
function scrollY() {
  var de = document.documentElement;

  return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}

/* 浏览器水平滚动位置 */
function scrollX() {
  var de = document.documentElement;

  return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
}

二、Jquery超简单遮罩层实现代码
在开发中，为了避免二次提交，遮罩层的运用越来越普遍
看了很多代码，下面跟大家分享一下我认为最简单的遮罩层实现方式：
1.样式如下设置：
CSS代码：

<style type="text/css">   
  .mask {    
      position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;   
      z-index: 1002; left: 0px;   
      opacity:0.5; -moz-opacity:0.5;   
    }   
</style>

其中：opacity:0.5;适用于IE， -moz-opacit:0.5;适用于火狐；你只需要都加上，便可以火狐和IE下都可以使用。
2.指定层的高度、和宽度
js代码

<pre class="html" name="code"><script type="text/javascript">   
  //兼容火狐、IE8  
  //显示遮罩层  
  function showMask(){   
    $("#mask").css("height",$(document).height());   
    $("#mask").css("width",$(document).width());   
    $("#mask").show();   
  } 
  //隐藏遮罩层 
  function hideMask(){   
     
    $("#mask").hide();   
  } 
   
</script>

3.在<body>中加入如下代码，然后就可以看到效果

html代码

<div id="mask" class="mask"></div>  
<a href="javascript:;" onclick="showMask()" >点我显示遮罩层</a><br />

4.使用方法
在ajax提交表单后，加上showMask方法，数据返回后，加上hideMask()
需要的亲们可以根据自己需求，在遮罩层上面加一些提示信息

三、发布个JQuery的遮罩层实现（mask)

用过ExtJs的可能知道在ExtJs中集成了很多的UI元素可以很方便我们的使用。其中有mask()和unmask()这两个方法,这两个方法在指定的元素上添加一个遮罩层和一个提示消息实现，增加客户体验。由于最近做项目的时候，发现有时为了使用这一两个方法需要引入一个比较“庞大”的Extjs进来，觉得有点不划算，于是自己用jquery实现了一个比较简单mask、unmask方法来实现该效果。大家知道jquery是一个优秀的javascript框架，不但体积小而且使用方便，我现在逐渐将系统中使用Extjs实现的代码或组建全部更换成Jquery来实现。好了不多说，上我的代码，这些代码是根据网上的一位朋友实现的documentMask基础上进行整改的，使用上更加灵活方便了。

(function(){
    $.extend($.fn,{
      mask: function(msg,maskDivClass){
        this.unmask();
        // 参数
        var op = {
          opacity: 0.8,
          z: 10000,
          bgcolor: '#ccc'
        };
        var original=$(document.body);
        var position={top:0,left:0};
              if(this[0] && this[0]!==window.document){
                original=this;
                position=original.position();
              }
        // 创建一个 Mask 层，追加到对象中
        var maskDiv=$('<div class="maskdivgen"> </div>');
        maskDiv.appendTo(original);
        var maskWidth=original.outerWidth();
        if(!maskWidth){
          maskWidth=original.width();
        }
        var maskHeight=original.outerHeight();
        if(!maskHeight){
          maskHeight=original.height();
        }
        maskDiv.css({
          position: 'absolute',
          top: position.top,
          left: position.left,
          'z-index': op.z,
         width: maskWidth,
          height:maskHeight,
          'background-color': op.bgcolor,
          opacity: 0
        });
        if(maskDivClass){
          maskDiv.addClass(maskDivClass);
        }
        if(msg){
          var msgDiv=$('<div style="position:absolute;border:#6593cf 1px solid; padding:2px;background:#ccca"><div style="line-height:24px;border:#a3bad9 1px solid;background:white;padding:2px 10px 2px 10px">'+msg+'</div></div>');
          msgDiv.appendTo(maskDiv);
          var widthspace=(maskDiv.width()-msgDiv.width());
          var heightspace=(maskDiv.height()-msgDiv.height());
          msgDiv.css({
                cursor:'wait',
                top:(heightspace/2-2),
                left:(widthspace/2-2)
           });
         }
         maskDiv.fadeIn('fast', function(){
          // 淡入淡出效果
          $(this).fadeTo('slow', op.opacity);
        })
        return maskDiv;
      },
     unmask: function(){
           var original=$(document.body);
             if(this[0] && this[0]!==window.document){
              original=$(this[0]);
           }
           original.find("> div.maskdivgen").fadeOut('slow',0,function(){
             $(this).remove();
           });
      }
    });
  })();

下面是使用实例代码可供参考

<html>
  <head>
    <style>
      body{
        font-size:12px;
      }  
    </style>
    <script src="jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">
      (function(){
    $.extend($.fn,{
      mask: function(msg,maskDivClass){
        this.unmask();
        // 参数
        var op = {
          opacity: 0.8,
          z: 10000,
          bgcolor: '#ccc'
        };
        var original=$(document.body);
        var position={top:0,left:0};
              if(this[0] && this[0]!==window.document){
                original=this;
                position=original.position();
              }
        // 创建一个 Mask 层，追加到对象中
        var maskDiv=$('<div class="maskdivgen"> </div>');
        maskDiv.appendTo(original);
        var maskWidth=original.outerWidth();
        if(!maskWidth){
          maskWidth=original.width();
        }
        var maskHeight=original.outerHeight();
        if(!maskHeight){
          maskHeight=original.height();
        }
        maskDiv.css({
          position: 'absolute',
          top: position.top,
          left: position.left,
          'z-index': op.z,
         width: maskWidth,
          height:maskHeight,
          'background-color': op.bgcolor,
          opacity: 0
        });
        if(maskDivClass){
          maskDiv.addClass(maskDivClass);
        }
        if(msg){
          var msgDiv=$('<div style="position:absolute;border:#6593cf 1px solid; padding:2px;background:#ccca"><div style="line-height:24px;border:#a3bad9 1px solid;background:white;padding:2px 10px 2px 10px">'+msg+'</div></div>');
          msgDiv.appendTo(maskDiv);
          var widthspace=(maskDiv.width()-msgDiv.width());
          var heightspace=(maskDiv.height()-msgDiv.height());
          msgDiv.css({
                cursor:'wait',
                top:(heightspace/2-2),
                left:(widthspace/2-2)
           });
         }
         maskDiv.fadeIn('fast', function(){
          // 淡入淡出效果
          $(this).fadeTo('slow', op.opacity);
        })
        return maskDiv;
      },
     unmask: function(){
           var original=$(document.body);
             if(this[0] && this[0]!==window.document){
              original=$(this[0]);
           }
           original.find("> div.maskdivgen").fadeOut('slow',0,function(){
             $(this).remove();
           });
      }
    });
  })();
    </script>
  </head>
  <body style="width:100%">
    
    测试
  <div id="test" style="width:200px;height:100px; border:black 1px solid;">
  </div>
  <a href="#" onclick="$('#test').mask('DIV层遮罩')">div遮罩</a>
  <a href="#" onclick="$('#test').unmask()">关闭div遮罩</a>
  <a href="#" onclick="$(document).mask('全屏遮罩').click(function(){$(document).unmask()})">全部遮罩</a>
  </body>
</html>

以上就是jquery实现遮罩层的全部内容介绍，希望对大家的学习有所帮助。

jquery实现简单的遮罩层

- Author -

lijiao

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

Javascript 相关文章推荐
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
node后端服务保活的实现
Nov 10 Javascript
JavaScript实现简单动态表格
Dec 02 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 05 Javascript
javascript多物体运动实现方法分析
Jan 08 #Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 #Javascript
javascript匀速运动实现方法分析
Jan 08 #Javascript
js如何改变文章的字体大小
Jan 08 #Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 #Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 #Javascript
基于javascript实现右下角浮动广告效果
Jan 08 #Javascript
弱口令(1) PV(1) 访问日志(2) 线程(1) 逆序(1) jenkins(1) 进程假死(1) ipv6(1) UV(1) 连接数(1)
You might like
解析php中array_merge与array+array的区别
2013/06/21 PHP
php中return的用法实例分析
2015/02/28 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
让你的网站可编辑的实现js代码
2009/10/19 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
详解javascript高级定时器
2015/12/31 Javascript
JavaScript必知必会（二) null 和undefined
2016/06/08 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
Python中extend和append的区别讲解
2019/01/24 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
怎样比较两个类型为String的字符串
2016/08/17 面试题
办公室副主任岗位职责
2013/11/25 职场文书
高分子材料与工程专业个人求职信
2013/12/15 职场文书
怎么写好自荐书
2014/03/02 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
汽车车尾标语大全
2015/08/11 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
高一作文之乐趣
2019/11/21 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS