使用jQuery制作Web页面遮罩层插件的实例教程-工具盒子

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


$.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 &gt; 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 = $('&lt;div class=&quot;rhui-mask&quot; style=&quot;position:fixed;&quot;&gt;&lt;/div&gt;'); 
  $content = $('&lt;div class=&quot;rhui-mask-content&quot; style=&quot;position:fixed;&quot;&gt;' + message + '&lt;/div&gt;'); 
} else { 
  $overlay = $('&lt;div class=&quot;rhui-mask&quot;&gt;&lt;/div&gt;'); 
  $content = $('&lt;div class=&quot;rhui-mask-content&quot;&gt;' + message + '&lt;/div&gt;'); 
} 

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

效果如图所示

2016526190416087.png (741×464)

页面调用完整代码


<!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 &gt; 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 = $('&lt;div class=&quot;rhui-mask&quot; style=&quot;position:fixed;&quot;&gt;&lt;/div&gt;'); 
      $content = $('&lt;div class=&quot;rhui-mask-content&quot; style=&quot;position:fixed;&quot;&gt;' + message + '&lt;/div&gt;'); 
    } else { 
      $overlay = $('&lt;div class=&quot;rhui-mask&quot;&gt;&lt;/div&gt;'); 
      $content = $('&lt;div class=&quot;rhui-mask-content&quot;&gt;' + message + '&lt;/div&gt;'); 
    } 

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

51工具盒子

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

厉飞雨

相关推荐

最新文章

猜你喜欢

快捷分类