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 DOM的学习笔记
Dec 22 Javascript
jquery 插件学习(六)
Aug 06 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
js原生实现FastClick事件的实例
Nov 20 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
JS使用new操作符创建对象的方法分析
May 30 Javascript
一次让你了解全部JavaScript的作用域
Jun 24 Javascript
vue实现信息管理系统
May 30 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
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
php的socket编程详解
2016/11/20 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
Python sep参数使用方法详解
2020/02/12 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
税务专业毕业生自荐信
2013/11/10 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
教师业务学习材料
2014/12/16 职场文书