GitHub上人們分享的遮罩層插件也是玲瑯滿目,不過自己動手做一個的話肯定更復(fù)合自己的需求,這里就帶大家來看使用jQuery制作Web頁面遮罩層插件的實例教程,需要的朋友可以參考下

在網(wǎng)頁上經(jīng)常遇到需要等待很久的操作，比如導(dǎo)出報表等。為了預(yù)防用戶點(diǎn)擊其他操作或者多次點(diǎn)擊同個功能，需要用遮罩層把頁面或者操作區(qū)蓋住，防止用戶進(jìn)行下一步操作，同時可以提高界面友好度，讓用戶知道操作正在執(zhí)行。

$.fn.extend({ 

  /** 

   * 給元素添加遮罩層 

   * @param message {String} [可選]遮罩層顯示內(nèi)容 

   */

  mask: function (message) { 

    var $target = this, 

      fixed = false, 

      targetStatic = true; 

    if (Object.prototype.toString.call(message) !== '[object String]' || !message) { 

      //如果message為空或者不是字符串，則用默認(rèn)的消息提示。 

      message = '請稍候。。。'; 

    } 

    if ($target.length === 0) { 

      $target = $('body'); 

    } else { 

      if ($target.length > 1) { 

        $target = $target.first(); 

      } 

      if ($target[0] === window || $target[0] === document) { 

        $target = $('body'); 

      } 

    } 

    if($target[0] === document.body){ 

      fixed = true; 

    } 

    //如果目標(biāo)元素已經(jīng)有遮罩層，獲取遮罩層 

    var old = $target.data('rhui.mask'); 

    if (old) { 

      old.$content.html(message); 

      center($target, old.$content, fixed); 

      return; 

    } 

    //如果被遮蓋的元素是static，把元素改成relative 

    if ($target.css('position') === 'static') { 

      targetStatic = true; 

      $target.css('position', 'relative'); 

    } 

    var $content, $overlay; 

    if (fixed) { 

      $overlay = $('<div class="rhui-mask" style="position:fixed;"></div>'); 

      $content = $('<div class="rhui-mask-content" style="position:fixed;">' + message + '</div>'); 

    } else { 

      $overlay = $('<div class="rhui-mask"></div>'); 

      $content = $('<div class="rhui-mask-content">' + message + '</div>'); 

    } 

    $overlay.appendTo($target); 

    $content.appendTo($target); 

    //顯示遮罩層 

    $overlay.show(); 

    $content.show(); 

    //讓遮罩層居中 

    center($target, $content, fixed); 

    //把遮罩層信息添加到$target 

    $target.data('rhui.mask', { 

      fixed: fixed, 

      $overlay: $overlay, 

      $content: $content, 

      targetStatic: targetStatic 

    }); 

    /** 

     * 讓遮罩層內(nèi)容居中顯示 

     * @param $target  被遮蓋的元素 

     * @param $content 遮罩層內(nèi)容元素 

     * @param fixed   遮罩層是否固定顯示 

     */

    function center($target, $content, fixed) { 

      var $window, 

        height = $content.outerHeight(true), 

        width = $content.outerWidth(true); 

      if (fixed) { 

        //如果遮罩層固定顯示，讓遮罩層在window居中 

        $window = $(window); 

        $content.css({ 

          left: ($window.width() - width) / 2, 

          top: ($window.height() - height) / 2 

        }); 

      } else { 

        //讓遮罩層在$target中居中 

        $content.css({ 

          left: ($target.width() - width) / 2, 

          top: ($target.height() - height) / 2 

        }); 

      } 

    } 

  }, 

  /** 

   * 取消遮罩層 

   */

  unmask: function () { 

    var $target; 

    if (this.length === 0) { 

      $target = $('body'); 

    } else { 

      $target = this.first(); 

      if ($target[0] === window || $target[0] === document) { 

        $target = $('body'); 

      } 

    } 

    var data = $target.data('rhui.mask'); 

    if (!data) { 

      return; 

    } 

    //還原目標(biāo)元素的position屬性 

    if (data.targetStatic) { 

      $target.css('position', 'static'); 

    } 

    data.$overlay.remove(); 

    data.$content.remove(); 

    $target.removeData('rhui.mask'); 

  } 

}); 

插件樣式由rhui-mask和rhui-mask-content類控制，rhui-mask是遮罩層樣式，rhui-mask-content是遮罩層的提示內(nèi)容樣式。

/* 遮罩層樣式 */

.rhui-mask { 

  position: absolute; 

  top: 0; 

  right: 0; 

  bottom: 0; 

  left: 0; 

  z-index: 9000; 

  display: block; 

  margin: 0; 

  padding: 0; 

  border-style: none; 

  background-color: #777; 

  opacity: 0.3; 

  zoom: 1; 

  filter: alpha(opacity=30); 

} 

/* 遮罩層顯示內(nèi)容樣式 */

.rhui-mask-content { 

  position: absolute; 

  z-index: 9999; 

  display: block; 

  margin: 0; 

  padding: 15px 20px; 

  border: 2px solid rgb(109, 157, 215); 

  background-color: #fff; 

  color: blue; 

  letter-spacing: 2px; 

  font-weight: bold; 

  font-size: 15px; 

  cursor: wait; 

} 

效果如圖所示

頁面調(diào)用完整代碼

<!DOCTYPE html> 

<html> 

<head> 

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

  <title>網(wǎng)頁遮罩層的實現(xiàn)</title> 

  <style type="text/css"> 

    /* 遮罩層樣式 */   

    .rhui-mask { 

      position: absolute; 

      top: 0; 

      right: 0; 

      bottom: 0; 

      left: 0; 

      z-index: 9000; 

      display: block; 

      margin: 0; 

      padding: 0; 

      border-style: none; 

      background-color: #777; 

      opacity: 0.3; 

      zoom: 1; 

      filter: alpha(opacity=30); 

    } 

    /* 遮罩層顯示內(nèi)容樣式 */   

    .rhui-mask-content { 

      position: absolute; 

      z-index: 9999; 

      display: block; 

      margin: 0; 

      padding: 15px 20px; 

      border: 2px solid rgb(109, 157, 215); 

      background-color: #fff; 

      color: blue; 

      letter-spacing: 2px; 

      font-weight: bold; 

      font-size: 15px; 

      cursor: wait; 

    } 

  </style> 

  <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script> 

  <script type="text/javascript"> 

    $.fn.extend({ 

      /** 

       * 給元素添加遮罩層 

       * @param message {String} [可選]遮罩層顯示內(nèi)容 

       */

      mask: function (message) { 

        var $target = this, 

          fixed = false, 

          targetStatic = true; 

        if (Object.prototype.toString.call(message) !== '[object String]' || !message) { 

          //如果message為空或者不是字符串，則用默認(rèn)的消息提示。 

          message = '請稍候。。。'; 

        } 

        if ($target.length === 0) { 

          $target = $('body'); 

        } else { 

          if ($target.length > 1) { 

            $target = $target.first(); 

          } 

          if ($target[0] === window || $target[0] === document) { 

            $target = $('body'); 

          } 

        } 

        if ($target[0] === document.body) { 

          fixed = true; 

        } 

        //如果目標(biāo)元素已經(jīng)有遮罩層，獲取遮罩層 

        var old = $target.data('rhui.mask'); 

        if (old) { 

          old.$content.html(message); 

          center($target, old.$content, fixed); 

          return; 

        } 

        //如果被遮蓋的元素是static，把元素改成relative 

        if ($target.css('position') === 'static') { 

          targetStatic = true; 

          $target.css('position', 'relative'); 

        } 

        var $content, $overlay; 

        if (fixed) { 

          $overlay = $('<div class="rhui-mask" style="position:fixed;"></div>'); 

          $content = $('<div class="rhui-mask-content" style="position:fixed;">' + message + '</div>'); 

        } else { 

          $overlay = $('<div class="rhui-mask"></div>'); 

          $content = $('<div class="rhui-mask-content">' + message + '</div>'); 

        } 

        $overlay.appendTo($target); 

        $content.appendTo($target); 

        //顯示遮罩層 

        $overlay.show(); 

        $content.show(); 

        //讓遮罩層居中 

        center($target, $content, fixed); 

        //把遮罩層信息添加到$target 

        $target.data('rhui.mask', { 

          fixed: fixed, 

          $overlay: $overlay, 

          $content: $content, 

          targetStatic: targetStatic 

        }); 

        /** 

         * 讓遮罩層內(nèi)容居中顯示 

         * @param $target  被遮蓋的元素 

         * @param $content 遮罩層內(nèi)容元素 

         * @param fixed   遮罩層是否固定顯示 

         */

        function center($target, $content, fixed) { 

          var $window, 

            height = $content.outerHeight(true), 

            width = $content.outerWidth(true); 

          if (fixed) { 

            //如果遮罩層固定顯示，讓遮罩層在window居中 

            $window = $(window); 

            $content.css({ 

              left: ($window.width() - width) / 2, 

              top: ($window.height() - height) / 2 

            }); 

          } else { 

            //讓遮罩層在$target中居中 

            $content.css({ 

              left: ($target.width() - width) / 2, 

              top: ($target.height() - height) / 2 

            }); 

          } 

        } 

      }, 

      /** 

       * 取消遮罩層 

       */

      unmask: function () { 

        var $target; 

        if (this.length === 0) { 

          $target = $('body'); 

        } else { 

          $target = this.first(); 

          if ($target[0] === window || $target[0] === document) { 

            $target = $('body'); 

          } 

        } 

        var data = $target.data('rhui.mask'); 

        if (!data) { 

          return; 

        } 

        //還原目標(biāo)元素的position屬性 

        if (data.targetStatic) { 

          $target.css('position', 'static'); 

        } 

        data.$overlay.remove(); 

        data.$content.remove(); 

        $target.removeData('rhui.mask'); 

      } 

    }); 

  </script> 

</head> 

<body> 

  <div id="div" style="width:600px;height:300px;margin:10px;border:1px solid red;"></div> 

  <script type="text/javascript"> 

    $(function () { 

      //遮蓋整個頁面 

      //只要對window、document和body使用遮罩層，都會遮蓋整個頁面 

      //$(window).mask();      

      //$(window).unmask(); 取消遮罩 

      //遮蓋div 

      $('#div').mask('加載中，請稍候。。。'); 

    }); 

  </script> 

</body> 

</html>