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 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
JS实现可视化音频效果的实例代码
Jan 16 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
PHP 编写的 25个游戏脚本
2009/05/11 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
php计算整个目录大小的方法
2015/06/19 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
flask框架中的cookie和session使用
2021/01/31 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
NET程序员上机面试题
2015/05/23 面试题
药品质量检测应届生求职信
2013/11/14 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
公司证明怎么写
2014/09/22 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
零基础学java之循环语句的使用
2022/04/10 Java/Android