jquery implémente des compétences simples de masque layer_javascript

Cet article explique le calque de masque jquery avec des exemples, y compris différents styles d'implémentation du calque de masque, l'implémentation du calque de masque, etc. Il est partagé avec tout le monde pour votre référence. Le contenu spécifique est le suivant

1. jQuery implémente différents styles de calques de masque
1.1 Style de calque de masque translucide d'arrière-plan
Un fond noir (ou autre) est requis et doit être défini sur un positionnement absolu. Voici le style CSS utilisé dans le projet :
.

/* 半透明的遮罩层 */
#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 pour implémenter le masque

/* 显示遮罩层 */
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 Boîte d'invite
Le but du masque est de rendre impossible l'exploitation du contenu et de mettre en surbrillance la boîte d'invite. La boîte d'invite peut être créée en vous référant à ce qui précède. L'index z peut être supérieur au calque du masque. La question principale est de savoir comment contrôler que la boîte d'invite soit centrée dans le navigateur.

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

2. Code d'implémentation de la couche de masque super simple Jquery
En développement, afin d'éviter la soumission secondaire, l'utilisation de couches de masques est de plus en plus courante
Après avoir lu beaucoup de code, je vais partager avec vous ce que je pense être le moyen le plus simple d'implémenter le calque de masque :
1. Le style est défini comme suit :
Code 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>  

Parmi eux : opacity:0.5 ; convient à IE, -moz-opacit :0.5 ; il suffit de les ajouter, et il peut être utilisé à la fois dans Firefox et dans IE.
2. Précisez la hauteur et la largeur du calque
code 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. Ajoutez le code suivant à 6c04bd5ca3fcae76e30b72ad730ca86d, et vous pourrez alors voir l'effet

code html

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

4. Comment utiliser
Une fois qu'Ajax a soumis le formulaire, ajoutez la méthode showMask, et une fois les données renvoyées, ajoutez hideMask()
Ceux qui en ont besoin peuvent ajouter quelques informations rapides sur le calque de masque en fonction de leurs propres besoins

3. Publier une implémentation de couche de masque JQuery (masque)

Ceux qui ont utilisé ExtJs savent peut-être que de nombreux éléments d'interface utilisateur sont intégrés dans ExtJs, ce qui est très pratique à utiliser pour nous. Il existe deux méthodes, mask() et unmask(), qui ajoutent un calque de masque et un message d'invite à l'élément spécifié pour améliorer l'expérience client. Lorsque je travaillais récemment sur un projet, j'ai découvert que parfois, pour utiliser ces deux méthodes, je devais introduire un Extjs relativement "grand", ce qui me paraissait un peu peu rentable, j'ai donc utilisé jquery pour implémenter un masque relativement simple. et démasquer la méthode pour obtenir cet effet. Tout le monde sait que jquery est un excellent framework javascript. Il est non seulement de petite taille mais aussi facile à utiliser. Maintenant, je remplace progressivement tous les codes ou composants implémentés à l'aide d'Extjs dans le système par Jquery. Bon, sans plus tarder, voici mes codes. Ces codes sont modifiés en fonction du documentMask implémenté par un ami sur Internet, ce qui les rend plus flexibles et plus pratiques à utiliser.

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

Ce qui suit est l'exemple de code d'utilisation pour référence

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

Ce qui précède est l'introduction complète à l'implémentation du calque de masque dans jquery. J'espère que cela sera utile à l'apprentissage de chacun.