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

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

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

效果如图所示

页面调用完整代码

网页遮罩层的实现

  //遮盖div 
  $('#div').mask('加载中，请稍候。。。'); 
});

jQuery 遮罩层

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

相关推荐