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 EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jquery自定义组件实例详解
Dec 31 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
Webkit的跨域安全问题说明
2011/09/13 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
详解Python if-elif-else知识点
2018/06/11 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
"火柴棍式"程序员面试题
2014/03/16 面试题
毕业生自荐信的主要内容
2013/10/29 职场文书
护理专业学生的求职信范文
2013/12/11 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
《四季》教学反思
2014/04/08 职场文书
培训研修方案
2014/06/06 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
应用外语系自荐信
2014/06/26 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
超市员工辞职信范文
2015/05/12 职场文书
医德医风学习心得体会
2016/01/25 职场文书
Python+tkinter实现高清图片保存
2022/03/13 Python