首页
所有分类
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 arguments.callee的应用代码
May 07 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
javascript不可用的问题探究
Oct 01 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
Jquery使用val方法读写value值
May 18 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 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) format(1) Pyecharts(7) 计算器(5) PyTorch(1) 井字棋(1) 图像处理(1) 五子棋(12) 人工智能(2) 模型保存加载(1)
You might like
php判断正常访问和外部访问的示例
2014/02/10 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
jquery 批量上传图片实现代码
2010/01/28 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
Easy.Ajax 部分源代码 支持文件上传功能， 兼容所有主流浏览器
2011/02/24 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
解决Django中多条件查询的问题
2019/07/18 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
Python测试框架：pytest学习笔记
2020/10/20 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
摩顿布朗英国官方网上商店：奢华沐浴、身体和头发护理
2016/10/29 全球购物
美国健康和保健平台：healtop
2020/07/02 全球购物
戴尔荷兰官方网站：Dell荷兰
2020/10/04 全球购物
LINUX下线程，GDI类的解释
2012/04/17 面试题
销售工作岗位职责
2013/12/24 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
审美与表现自我评价
2015/03/09 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
python基础之类方法和静态方法
2021/10/24 Python
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript