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 相关文章推荐
纯js实现背景图片切换效果代码
Nov 14 Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
Postman内建变量常用方法实例解析
Jul 28 Javascript
详解JavaScript中的链式调用
Nov 27 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
PHP下几种删除目录的方法总结
2007/08/19 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
Ajax基础知识详解
2017/02/17 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
python实现从字典中删除元素的方法
2015/05/04 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
python学习必备知识汇总
2017/09/08 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
机械设计及其自动化求职推荐信
2014/02/17 职场文书
自行车广告词大全
2014/03/21 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
小学英语听课心得体会
2016/01/14 职场文书
学习党史心得体会2016
2016/01/23 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
Python深度学习之Pytorch初步使用
2021/05/20 Python