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实现遮罩层的全部内容介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jquery蒙版控件实现代码
Dec 08 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
Vuex的实战使用详解
Oct 31 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
You might like
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
js中日期的加减法
2015/05/06 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
JSON 数据格式详解
2017/09/13 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python文件和目录操作函数小结
2014/07/11 Python
Python采用raw_input读取输入值的方法
2014/08/18 Python
python 编写简单网页服务器的实例
2018/06/01 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
python异常触发及自定义异常类解析
2019/08/06 Python
pytorch 共享参数的示例
2019/08/17 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
python实现批量转换图片为黑白
2020/06/16 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
好的演讲稿开场白
2013/12/30 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
党支部审查意见
2015/06/02 职场文书
村主任当选感言
2015/08/01 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
APP界面设计技巧和注意事项
2022/04/29 杂记