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 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
js技巧--转义符&quot;\&quot;的妙用
Jan 09 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
浅谈javascript中的闭包
May 13 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
一些可能会用到的Node.js面试题
Jun 15 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多任务程序实例解析
2014/07/19 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
js 事件小结 表格区别
2007/08/13 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
js 窗口抖动示例
2013/09/04 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
使用Python生成随机密码的示例分享
2016/02/18 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
Django中create和save方法的不同
2019/08/13 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
python实现126邮箱发送邮件
2020/05/20 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
保安拾金不昧表扬信
2014/01/15 职场文书
运动会解说词200字
2014/02/06 职场文书
职业女性的职业规划
2014/03/04 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python