首页
所有分类
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 相关文章推荐
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
Javascript 数组排序详解
Oct 22 Javascript
简单的js表格操作
Sep 24 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
JS实现页面侧边栏效果探究
Jan 08 Javascript
JavaScript 与 TypeScript之间的联系
Nov 27 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
分区(2) 自动播放(1) router(1) 驱动模型(1) 正则表达式(3) 抽象类(1) 静态压缩(1) 乱码(3) 路由(1) 接口(1)
You might like
PHP SEO优化之URL优化方法
2011/04/21 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
详解JS函数重载
2014/12/04 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框
2016/03/01 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
深入浅析Python传值与传址
2018/07/10 Python
Python数据可视化之画图
2019/01/15 Python
一行python实现树形结构的方法
2019/08/09 Python
Levi’s美国官网：美国著名的牛仔裤品牌
2016/08/19 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
企业精细化管理实施方案
2014/03/23 职场文书
心理健康活动总结
2014/04/30 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
2019毕业典礼主持词！
2019/07/05 职场文书
甜美蛋糕店的创业计划书模板，拿来即用！
2019/08/21 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
MySQL查询日期时间
2022/05/15 MySQL
python实现商品进销存管理系统
2022/05/30 Python