首页
所有分类
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 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
JS request函数 用来获取url参数
May 17 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
javascript学习之json入门
Dec 22 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
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) 立体声(1) 收音机(62) 调频(4) 中波(3) 电台频率(32) Harman Kardon(1) KDKA(1) 长波(3) 短波(8)
You might like
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
表单验证的完整应用案例探讨
2013/03/29 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
jQuery操作cookie
2016/08/08 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
JavaScript：ES2019 的新特性(译)
2019/08/08 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
php使用递归与迭代实现快速排序示例
2014/01/23 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
python爬虫入门教程--快速理解HTTP协议（一）
2017/05/25 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
区分python中的进程与线程
2020/08/13 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
阿迪达斯西班牙官方网站：adidas西班牙
2016/07/21 全球购物
车库门开启器、遥控器和零件：Chamberlain
2019/04/09 全球购物
世界上最受欢迎的花店：1-800-Flowers.com
2020/06/01 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
业务经理的岗位职责
2013/11/16 职场文书
专科文秘应届生求职信
2013/11/18 职场文书
自立自强的名人事例
2014/02/10 职场文书
少年闰土教学反思
2014/02/22 职场文书
《忆江南》教学反思
2014/04/07 职场文书
冬季安全检查方案
2014/05/23 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
JS中如何优雅的使用async await详解
2021/10/05 Javascript