jquery melaksanakan kemahiran layer_javascript topeng mudah-tutorial js-php.cn

Artikel ini menerangkan lapisan topeng jquery dengan contoh, termasuk gaya pelaksanaan lapisan topeng yang berbeza, pelaksanaan topeng lapisan topeng, dll. Ia dikongsi dengan semua orang untuk rujukan anda. Kandungan khusus adalah seperti berikut

1. jQuery melaksanakan gaya lapisan topeng yang berbeza
1.1 Gaya lapisan topeng lut sinar latar belakang
Latar belakang hitam (atau lain-lain) diperlukan dan mesti ditetapkan kepada kedudukan mutlak Berikut ialah gaya css yang digunakan dalam projek:

/* 半透明的遮罩层 */
#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;
}

Salin selepas log masuk

1.2 jQuery untuk melaksanakan topeng

/* 显示遮罩层 */
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;
}

Salin selepas log masuk

1.3 Kotak Gesaan
Tujuan topeng adalah untuk menjadikannya mustahil untuk mengendalikan kandungan dan menyerlahkan kotak gesaan. Kotak gesaan boleh dibuat dengan merujuk kepada indeks-z boleh lebih tinggi daripada lapisan topeng. Soalan utama ialah bagaimana untuk mengawal kotak gesaan untuk dipusatkan dalam penyemak imbas.

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

Salin selepas log masuk

2. Kod pelaksanaan lapisan topeng super mudah Jquery
Dalam pembangunan, untuk mengelakkan penyerahan sekunder, penggunaan lapisan topeng menjadi semakin biasa
Selepas membaca banyak kod, saya akan berkongsi dengan anda apa yang saya fikir adalah cara paling mudah untuk melaksanakan lapisan topeng:
1. Gaya ditetapkan seperti berikut:
Kod 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>

Salin selepas log masuk

Antaranya: opacity:0.5; sesuai untuk IE, -moz-opacit:0.5 adalah sesuai untuk Firefox sahaja;
2. Nyatakan ketinggian dan lebar lapisan
kod 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>

Salin selepas log masuk

3. Tambahkan kod berikut pada , dan kemudian anda boleh melihat kesannya

kod html

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

Salin selepas log masuk

4. Cara menggunakan
Selepas ajax menyerahkan borang, tambahkan kaedah showMask dan selepas data dikembalikan, tambahkan hideMask()
Mereka yang memerlukannya boleh menambah beberapa maklumat segera pada lapisan topeng mengikut keperluan mereka sendiri

3. Keluarkan pelaksanaan lapisan topeng JQuery (topeng)

Mereka yang telah menggunakan ExtJs mungkin tahu bahawa banyak elemen UI disepadukan dalam ExtJs, yang sangat mudah untuk kami gunakan. Terdapat dua kaedah, mask() dan unmask(), yang menambah lapisan topeng dan mesej segera kepada elemen yang ditentukan untuk meningkatkan pengalaman pelanggan. Apabila saya sedang mengerjakan projek baru-baru ini, saya mendapati kadang-kadang untuk menggunakan kedua-dua kaedah ini, saya perlu memperkenalkan Extjs yang agak "besar", yang saya rasa agak tidak ekonomik, jadi saya menggunakan jquery untuk melaksanakan topeng yang agak mudah. dan kaedah buka topeng untuk mencapai kesan ini. Semua orang tahu bahawa jquery ialah rangka kerja javascript yang sangat baik Ia bukan sahaja bersaiz kecil tetapi juga mudah untuk digunakan Sekarang saya secara beransur-ansur menggantikan semua kod atau komponen yang dilaksanakan menggunakan Extjs dalam sistem dengan Jquery. Okay, tanpa berlengah lagi, berikut ialah kod saya yang diubah suai berdasarkan documentMask yang dilaksanakan oleh rakan di Internet, menjadikannya lebih fleksibel dan mudah digunakan.

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

Salin selepas log masuk

Berikut ialah kod contoh penggunaan untuk rujukan

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

Salin selepas log masuk

Di atas adalah pengenalan lengkap kepada pelaksanaan lapisan topeng dalam jquery saya harap ia akan membantu pembelajaran semua orang.