jQuery遮罩层实例讲解


Posted in jQuery onMay 11, 2017

本文实例为大家分享了jQuery遮罩层展示的具体代码,供大家参考,具体内容如下

1.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;
}

1.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;
}

1.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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jQuery中库的引用方法
Jan 06 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jQuery zTree树插件动态加载实例代码
May 11 #jQuery
jQuery实现的简单在线计算器功能
May 11 #jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 #jQuery
JQuery实现定时刷新功能代码
May 09 #jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 #jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 #jQuery
jquery平滑滚动到顶部插件使用详解
May 08 #jQuery
You might like
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
在Python中使用dict和set方法的教程
2015/04/27 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
餐饮管理自我介绍信
2014/01/15 职场文书
初三政治教学反思
2014/01/30 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
2014年计生工作总结
2014/11/21 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
信仰纪录片观后感
2015/06/08 职场文书
新闻通讯稿范文
2015/07/22 职场文书
使用Python开发冰球小游戏
2022/04/30 Python
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers