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

2024-10-30 12:15:38

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

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

jq给页面添加覆盖层遮罩的实例

先引入jq代码,然后代码如下: $(function(){ var docHeight = $(document).height(); //获取窗口高度 $('body').append('<div id="overlay"></div>'); $('#overlay') .height(docHeight) .css({ 'opacity': .9, //透明度 'position': 'absolute', 'top': 0, 'left': 0, 'bac
jQuery实现弹出带遮罩层的居中浮动窗口效果

本文实例讲述了jQuery实现弹出带遮罩层的居中浮动窗口效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pop window</title> <style> *{ padding: 0; margin: 0; } .hide{ display: none
jquery实现简单的遮罩层

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

用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度等.现在何问起推荐一个带二维码的登录弹出层,可拖动.关闭,有需要的朋友可以参考一下. 结尾附有源码下载. 效果图: 代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法

本文实例讲述了jquery实现点击其他区域时隐藏下拉div和遮罩层的方法.分享给大家供大家参考,具体如下: 为了更好的用户体验,在做下拉获取其他有弹出层的时候,当展开下拉时,要做到点击其他区域也能自动隐藏收起下拉和遮罩层,这样的效果用一段js就可以了. 以下图为例的一个下拉菜单为参考: 效果实现源码: $(document).bind('click', function(e) { var e = e || window.event; //浏览器兼容性 var elem = e.target ||
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/xhtml" xml:l
jQuery点击按钮弹出遮罩层且内容居中特效

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

客户的网站上突然需要一个遮罩弹窗效果,也可以称作暗箱之类的,具体效果就是网页中背景变成半透明,然后在屏幕中间出现一个菜单之类的东西.这种效果在网上很常见,例如:QQ空间浏览相册等.这种效果的好处就是,可以让用户聚焦到弹出的菜单中. 神说,有代码的文章,应该有个 Demo ,于是就有了Demo. HTML 结构首先先来分析一下这个过程:触发某个事件(例如点击按钮),然后出现一个背景遮罩上面还有一个内容层.触发的按钮,我在这里用 div 来代替,并且使用 click 点击事件来演示.那么我们的 H
使用jQuery制作Web页面遮罩层插件的实例教程

在网页上经常遇到需要等待很久的操作,比如导出报表等.为了预防用户点击其他操作或者多次点击同个功能,需要用遮罩层把页面或者操作区盖住,防止用户进行下一步操作,同时可以提高界面友好度,让用户知道操作正在执行. $.fn.extend({ /** * 给元素添加遮罩层 * @param message {String} [可选]遮罩层显示内容 */ mask: function (message) { var $target = this, fixed = false, targetStatic =
jQuery实现的页面遮罩层功能示例【测试可用】

本文实例讲述了jQuery实现的页面遮罩层功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
基于jquery的web页面日期格式化插件

复制代码代码如下: (function ($) { var FormatDateTime = function FormatDateTime() { }; $.FormatDateTime = function (obj, IsMi) { var correcttime1 = eval('( new ' + obj.replace(new RegExp("\/", "gm"), "") + ')'); var myDate = correctt
jQuery遮罩层实现方法实例详解(附遮罩层插件)

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

JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,zTree是国内的大牛们搞的一个jquery树形tree插件,感觉很好用,很强大,而且完全免费,API等做的也非常不错.推荐 easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能. 使用 easyu
jQuery使用Layer弹出层插件闪退问题

一.前言巨坑,基础没学好,导致找了一个下午的问题,终于被我发现了.说多都是泪,记录下来,以后有人遇到这个错误可以参考下做项目期间做了几个页面,需要用到弹出层,为了方便使用到了Layer的插件,然后写点击事件在form表单中(第一个坑),接着,又使用button按钮(悲剧的开始),同样放在form表单下.想要的效果就是当我点击按钮的时候,就弹出层.(悲剧) 好了,巨坑开始,一开始页面打好之后,就放到SSM框架中,出现的问题一开始就是404地址找不到,使用绝对定位不行,浏览器报的错误一直是错误的
jQuery实现web页面樱花坠落的特效

源码地址 https://github.com/jingegebuguai/Cherry_Blossoms(求star) 开发原因上课看到一位女生桌面背景是一课樱花树,顿时产生了一个让樱花可以在web页面飞舞的想法,借此把这个插件献送给那位女同学: 开发过焦点图,轮转图,瀑布流等应用插件,但是这类型插件还是第一次做,那个啥兴趣使然对吧: 开发工具 Jquery+webstorm,无需额外配置任何环境,移动端无法使用效果演示为了更加显眼,背景换成了黑色,gif图有些卡顿,实际效果比较流畅效
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)

Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作) <!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/xhtml"> <head>
自己动手制作基于jQuery的Web页面加载进度条插件

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

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

相关推荐

随机推荐