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 相关文章推荐
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
用console.table()调试javascript
Sep 04 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 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
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
JS中操作JSON总结
2020/12/06 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
重阳节主题班会
2015/08/17 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书