jQuery遮罩层实现方法实例详解(附遮罩层插件)


Posted in Javascript onDecember 08, 2015

本文实例分析了jQuery遮罩层实现方法。分享给大家供大家参考,具体如下:

1 背景半透明遮罩层样式

需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式:

/* 半透明的遮罩层 */
#overlay {
  background: #000;
  filter: alpha(opacity=50); /* IE的透明度 */
  opacity: 0.5; /* 透明度 */
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 100; /* 此处的图层要大于页面 */
  display:none;
}

2 jQuery实现遮罩

/* 显示遮罩层 */
function showOverlay() {
  $("#overlay").height(pageHeight());
  $("#overlay").width(pageWidth());
  // fadeTo第一个参数为速度,第二个为透明度
  // 多重方式控制透明度,保证兼容性,但也带来修改麻烦的问题
  $("#overlay").fadeTo(200, 0.5);
}
/* 隐藏覆盖层 */
function hideOverlay() {
  $("#overlay").fadeOut(200);
}
/* 当前页面高度 */
function pageHeight() {
  return document.body.scrollHeight;
}
/* 当前页面宽度 */
function pageWidth() {
  return document.body.scrollWidth;
}

3 提示框

遮罩的目的无非让人无法操作内容,突出提示框,而提示框可参考上面的制作,z-index比遮罩层更高便可。主要问题是,如何控制提示框在浏览器居中。

/* 定位到页面中心 */
function adjust(id) {
  var w = $(id).width();
  var h = $(id).height();
  var t = scrollY() + (windowHeight()/2) - (h/2);
  if(t < 0) t = 0;
  var l = scrollX() + (windowWidth()/2) - (w/2);
  if(l < 0) l = 0;
  $(id).css({left: l+'px', top: t+'px'});
}
//浏览器视口的高度
function windowHeight() {
  var de = document.documentElement;
  return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
}
//浏览器视口的宽度
function windowWidth() {
  var de = document.documentElement;
  return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth
}
/* 浏览器垂直滚动位置 */
function scrollY() {
  var de = document.documentElement;
  return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}
/* 浏览器水平滚动位置 */
function scrollX() {
  var de = document.documentElement;
  return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
}

补充:

jQuery简单遮罩层插件:

jQuery代码:

(function ($) {
  $.fn.ShowMask = function (options) {
    var defaults = {
      top: 150,
      left: 200
    }
    var options = $.extend(defaults, options);
    $("html").append('<div id="ui-mask"></div><div id="ui-mask-div" style="z-index: 99999;position: fixed;top:' + options.top + 'px;left:' + options.left + 'px;"><img src="Images/ui-loading.gif" alt="" /><span>操作正在进行中,请耐心等待......</span></div>')
    _this_ = $("#ui-mask");
    _this_.height($(document).height())
    _this_.show();
  };
  $.fn.HideMask = function (options) {
    _this_ = $("#ui-mask");
    _this_.remove();
  };
})(jQuery);

css样式:

#ui-mask
{
  background-color: #666;
  position: absolute;
  z-index: 9999;
  left: 0;
  top: 0;
  display: none;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
}
#ui-mask-div img
{
  width: 50px;
  height: 50px;
  float: left;
}
#ui-mask-div span
{
  height: 50px;
  line-height: 50px;
  display: block;
  float: left;
  color: Red;
  font-weight: bold;
  margin-left: 5px;
}

使用方法:

function btn_save()
{
  $(this).ShowMask();
  $.post('url',null,function(d,s){
    $(this).HideMask();
  });
}

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
深入理解Javascript闭包 新手版
Dec 28 Javascript
javascript针对DOM的应用分析(二)
Apr 15 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
jQuery实现的简单提示信息插件
Dec 08 #Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 #Javascript
AngularJS实现全选反选功能
Dec 08 #Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 #Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 #Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 #Javascript
AngularJS Module方法详解
Dec 08 #Javascript
You might like
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
JavaScript 原型与继承说明
2010/06/09 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
从零学Python之hello world
2014/05/21 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
python 重定向获取真实url的方法
2018/05/11 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
测绘工程本科生求职信
2013/10/10 职场文书
记帐员岗位责任制
2014/02/08 职场文书
五一手机促销方案
2014/03/08 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
2014教师年度工作总结
2014/11/10 职场文书
自主招生自荐信格式
2015/03/04 职场文书
如何写辞职信
2015/05/13 职场文书