使用jQuery制作Web页面遮罩层插件的实例教程_jquery

在网页上经常遇到需要等待很久的操作，比如导出报表等。为了预防用户点击其他操作或者多次点击同个功能，需要用遮罩层把页面或者操作区盖住，防止用户进行下一步操作，同时可以提高界面友好度，让用户知道操作正在执行。

$.fn.extend({
  /**
   * 给元素添加遮罩层
   * @param message {String} [可选]遮罩层显示内容
   */
  mask: function (message) {
    var $target = this,
      fixed = false,
      targetStatic = true; 

    if (Object.prototype.toString.call(message) !== '[object String]' || !message) {
      //如果message为空或者不是字符串，则用默认的消息提示。
      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;
    } 

    //如果目标元素已经有遮罩层，获取遮罩层
    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
    }); 

    /**
     * 让遮罩层内容居中显示
     * @param $target  被遮盖的元素
     * @param $content 遮罩层内容元素
     * @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;
    } 

    //还原目标元素的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是遮罩层的提示内容样式。

/* 遮罩层样式 */
.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);
} 

/* 遮罩层显示内容样式 */
.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;
}

效果如图所示

页面调用完整代码

<!DOCTYPE html>
<html> 

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>网页遮罩层的实现</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);
    } 

    /* 遮罩层显示内容样式 */
    .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} [可选]遮罩层显示内容
       */
      mask: function (message) {
        var $target = this,
          fixed = false,
          targetStatic = true; 

        if (Object.prototype.toString.call(message) !== '[object String]' || !message) {
          //如果message为空或者不是字符串，则用默认的消息提示。
          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;
        } 

        //如果目标元素已经有遮罩层，获取遮罩层
        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
        }); 

        /**
         * 让遮罩层内容居中显示
         * @param $target  被遮盖的元素
         * @param $content 遮罩层内容元素
         * @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;
        } 

        //还原目标元素的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>

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索jquery
遮罩层
jquery 遮罩层插件、jquery加载遮罩层插件、jquery弹出遮罩层插件、jquery 页面遮罩层、jquery页面加载遮罩层，以便于您获取更多的相关知识。

时间： 2024-08-18 07:01:47

使用jQuery制作Web页面遮罩层插件的实例教程_jquery的相关文章

基于jquery的web页面日期格式化插件_jquery

复制代码 代码如下: (function ($) { var FormatDateTime = function FormatDateTime() { }; $.FormatDateTime = function (obj, IsMi) { var correcttime1 = eval('( new ' + obj.replace(new RegExp("\/", "gm"), "") + ')'); var myDate = correctt

使用jQuery实现Web页面换肤功能的要点解析_jquery

网页换肤是一门老技术了,老的现在都不怎么流行了.但是,有时候有些客户就是想要这个换肤功能.于是就实践做了一下网页换肤,结果遇到了很多问题. 网页换肤的基本原理 基本原理很简单,就是使用 JS 切换对应的 CSS 样式表.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项. 那么基本工作流程就出来了:访问网页--JS 读取 Cookie

JQuery验证jsp页面属性是否为空(实例代码)_jquery

说明:验证是否为空的前提首先要保证是在提交form之前验证的,如果验证结果有为空的项那么限制表单不能提交,并且提示验证错误信息,验证页面属性都不为空的情况下表单正常提交,这部分属于JS部分的东西,与后台业务逻辑层和控制层基本没有任何关系. 限制提交的方法可以是在form标签里限制,也可以是在submit按钮上添加onclick事件限制: <form action=".." method="post" onsubmit="return check();

jQuery遮罩层实现方法实例详解(附遮罩层插件)_jquery

本文实例分析了jQuery遮罩层实现方法.分享给大家供大家参考,具体如下: 1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ display: none; position: absolute; top: 0px; lef

jquery实现简单的遮罩层_javascript技巧

本文实例讲解了jquery遮罩层,包括遮罩层的不同样式实现.mask实现遮罩层等,分享给大家供大家参考,具体内容如下 一.jQuery实现遮罩层的不同样式1.1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ display

jQuery弹出层插件Lightbox_me使用指南_jquery

网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下,支持完美.而在例如ie8一下的浏览器下显示不出应有的效果.例如jquery.avgrund插件在ie8下就无法显示. 本文介绍的插件Lightbox_me可以完美的支持chrome,firefox和ie7,ie8,ie9等主流浏览器. 1.Lightbox_me插件功能 用于显示弹出层 2.Ligh

jQuery点击按钮弹出遮罩层且内容居中特效_jquery

本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮.一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出居中遮罩</title> <meta name="viewport" content="width=devic

jquery 预加载图片效果插件与实例

文章一款告诉你如何利用jquery 预加载图片的实例教程,同时你也可以根据它出制作出漂亮的jquery 预加载图片效果哦. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

自己动手制作基于jQuery的Web页面加载进度条插件_jquery

静态效果的实现 网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 大体的写法如下: body{ margin:0; } #progress { position:fixed; height: 2px; background:#2085c5; transition:opacity 500ms linear } #progress.done { opacity:0 } #progress span { positio