首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMay 26, 2016

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

$.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; 
}

效果如图所示

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

页面调用完整代码

<!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制作Web页面遮罩层插件的实例教程

- Author -

死神的丧钟

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js实现的网页颜色代码表全集
Jul 17 Javascript
jquery select选中的一个小问题
Oct 11 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
JS常用函数使用指南
Nov 23 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 Javascript
vue递归实现树形组件
Jul 15 Vue.js
Node.js的npm包管理器基础使用教程
May 26 #Javascript
JavaScript中的各种操作符使用总结
May 26 #Javascript
浅析JavaScript中的对象类型Object
May 26 #Javascript
简单总结JavaScript中的String字符串类型
May 26 #Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 #Javascript
JavaScript中的Number数字类型学习笔记
May 26 #Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 #Javascript
底部导航(1) FutureTask(3) JAVA(88) 主题(1) Springboot-cli(1) 异步回调(1) ForkJoin(1) Android(19) 池化技术(1) CompletableFuture(1)
You might like
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
php生出随机字符串
2017/07/06 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
javascript编程起步（第六课）
2007/02/27 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
Express.JS使用详解
2014/07/17 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
简单了解python协程的相关知识
2019/08/31 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
Keras设置以及获取权重的实现
2020/06/19 Python
阿拉伯世界最大的电子卖场：Souq埃及
2016/08/01 全球购物
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
品牌服务方案
2014/06/03 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
爱晚亭导游词
2015/02/09 职场文书
横空出世观后感
2015/06/09 职场文书
二婚主持词
2015/06/30 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
python之基数排序的实现
2021/07/26 Python