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编写textarea输入字数限制代码
Mar 23 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 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
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
php头像上传预览实例代码
2017/05/02 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
Python smallseg分词用法实例分析
2015/05/28 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
python的数学算法函数及公式用法
2020/11/18 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
八一建军节感言
2014/02/28 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
治庸问责心得体会
2014/09/12 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
优秀党员推荐材料
2014/12/18 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript