当前位置:小鱼儿玄机二站 > 计算机网络 > jquery达成轻松的遮罩层,附遮罩层插件

jquery达成轻松的遮罩层,附遮罩层插件

文章作者:计算机网络 上传时间:2019-09-03

正文实例深入分析了jQuery遮罩层完结方式。分享给我们供我们参谋,具体如下:

本文实例疏解了jquery遮罩层,蕴涵遮罩层的比不上体裁完成、mask完毕遮罩层等,分享给大家供大家参照他事他说加以考察,具体内容如下

1 背景半晶莹剔透遮罩层样式

一、jQuery落成遮罩层的例外样式
**
1.1 背景半透明遮罩层样式**
内需四个暗紫(当然也能够其余)背景,且须安装为相对定位,以下是项目中用到的css样式:

内需多个墨绿(当然也可以别的)背景,且须安装为相对定位,以下是种类中用到的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;
}
/* 半透明的遮罩层 */
#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实现遮罩

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;
}
/* 显示遮罩层 */
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比遮罩层更加高便可。首要难点是,怎么样支配提醒框在浏览器居中。

3 提示框

/* 定位到页面中心 */
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;
}

遮罩的目标仅仅让人无能为力操作内容,非凡提醒框,而提示框可参照上边的炮制,z-index比遮罩层更高便可。重要难题是,如何调整提醒框在浏览器居中。

二、Jquery超轻松遮罩层达成代码 在开采中,为了制止三次提交,遮罩层的利用更宽广
看了重重代码,上面跟我们享用一下本身认为最简便易行的遮罩层完结方式:
1.样式如下设置: CSS代码:

/* 定位到页面中心 */
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;
}
<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代码

jQuery轻易遮罩层插件:

<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> 

jQuery代码:

3.在<body>中步入如下代码,然后就足以看看功能

(function ($) {
  $.fn.ShowMask = function (options) {
    var defaults = {
      top: 150,
      left: 200
    }
    var options = $.extend(defaults, options);
    $("html").append('<div id="ui-mask"></div><div id="ui-mask-div" style="z-index: 99999;position: fixed;top:' + options.top + 'px;left:' + options.left + 'px;"><img src="Images/ui-loading.gif" alt="图片 1" />操作正在进行中,请耐心等待......</div>')
    _this_ = $("#ui-mask");
    _this_.height($(document).height())
    _this_.show();
  };
  $.fn.HideMask = function (options) {
    _this_ = $("#ui-mask");
    _this_.remove();
  };
})(jQuery);

html代码

css样式:

<div id="mask" class="mask"></div>  
<a href="javascript:;" onclick="showMask()" >点我显示遮罩层</a><br /> 
#ui-mask
{
  background-color: #666;
  position: absolute;
  z-index: 9999;
  left: 0;
  top: 0;
  display: none;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
}
#ui-mask-div img
{
  width: 50px;
  height: 50px;
  float: left;
}
#ui-mask-div span
{
  height: 50px;
  line-height: 50px;
  display: block;
  float: left;
  color: Red;
  font-weight: bold;
  margin-left: 5px;
}

4.用到格局**
**在ajax提交表单后,加上showMask方法,数据重回后,加上hideMask()
亟需的亲们能够依靠本身须求,在遮罩层上面加一些提醒音讯

利用格局:

三、公布个JQuery的遮罩层达成(mask)

function btn_save()
{
  $(this).ShowMask();
  $.post('url',null,function(d,s){
    $(this).HideMask();
  });
}

用过ExtJs的或许清楚在ExtJs中融合为一了相当多的UI成分可以很方便大家的使用。在那之中有mask()和unmask()那四个章程,那四个章程在钦命的成分上增添二个遮罩层和一个晋升消息落成,增添客商体验。由于近期做项指标时候,发掘一时为了利用这一五个格局需求引进一个相比较“强大”的Extjs进来,以为有个别不划算,于是自个儿用jquery完毕了二个相比轻易mask、unmask方法来已毕该意义。大家知道jquery是一个优质的javascript框架,不但体积小并且使用方便,作者明天日渐将系统中使用Extjs完毕的代码或建设构造全体转变来Jquery来促成。好了相当少说,上自己的代码,那个代码是依靠英特网的一位朋友落成的documentMask基础上进展整顿改进的,使用上越来越灵活方便了。

瞩望本文所述对大家jQuery程序设计具备协理。

(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();
           });
      }
    });
  })();

你或然感兴趣的小说:

  • JQuery 遮罩层完成(mask)完毕代码
  • jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑行)
  • jQuery阻止移动端遮罩层后页面滚动
  • Jquery完结遮罩层的粗略实例(便是弹出DIV附近都灰溜溜不能够操作)
  • jquery完毕轻易的遮罩层
  • jquery下促成overlay遮罩层代码
  • jQuery完毕弹出带遮罩层的居中浮动窗口成效
  • jquery实现点击任何区域时遮掩下拉div和遮罩层的章程
  • 轻量级网页遮罩层jQuery插件用法实例
  • jQuery达成张开网页自动掸出遮罩层或点击弹出遮罩层效率示例
  • jQuery超轻便遮罩层完毕方式以身作则

下边是运用实例代码可供仿效

<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 遮罩层完毕(mask)达成代码
  • jQuery操作dom完成弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
  • jQuery阻止移动端遮罩层后页面滚动
  • Jquery完成遮罩层的简易实例(正是弹出DIV周边都灰溜溜无法操作)
  • jquery下完毕overlay遮罩层代码
  • jQuery完成弹出带遮罩层的居中浮动窗口功能
  • jQuery遮罩层达成方式实例详解(附遮罩层插件)
  • jquery完毕点击任何区域时遮盖下拉div和遮罩层的法子
  • 轻量级网页遮罩层jQuery插件用法实例
  • jQuery达成展开网页自动掸出遮罩层或点击弹出遮罩层功效示例
  • jQuery超简单遮罩层达成方式亲自过问

本文由小鱼儿玄机二站发布于计算机网络,转载请注明出处:jquery达成轻松的遮罩层,附遮罩层插件

关键词: