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+pjax简单示例汇总
Apr 21 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 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
PHP7多线程搭建教程
2017/04/21 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
javascript if条件判断方法小结
2014/05/17 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
Angular工具方法学习
2016/12/26 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
Python单例模式实例分析
2015/01/14 Python
Python中AND、OR的一个使用小技巧
2015/02/18 Python
有趣的python小程序分享
2017/12/05 Python
python实现事件驱动
2018/11/21 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
python中for in的用法详解
2020/04/17 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
给面试官的感谢信
2014/02/01 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
公路绿化方案
2014/05/12 职场文书
中层干部培训方案
2014/06/16 职场文书
服务标语口号
2014/07/01 职场文书
销售顾问工作计划书
2014/08/15 职场文书
2015年银行员工工作总结
2015/04/24 职场文书