jq给页面添加覆盖层遮罩的实例


Posted in Javascript onFebruary 16, 2017

先引入jq代码,然后代码如下:

$(function(){
 
 var docHeight = $(document).height(); //获取窗口高度
  
 $('body').append('<div id="overlay"></div>');
  
 $('#overlay')
  .height(docHeight)
  .css({
   'opacity': .9, //透明度
   'position': 'absolute',
   'top': 0,
   'left': 0,
   'background-color': 'black',
   'width': '100%',
   'z-index': 5000 //保证这个悬浮层位于其它内容之上
  });
   
  setTimeout(function(){$('#overlay').fadeOut('slow')}, 3000); //设置3秒后覆盖层自动淡出
});

以上这篇jq给页面添加覆盖层遮罩的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript自定义数组排序方法
Feb 12 Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
js实现表格数据搜索
Aug 09 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
如何利用React实现图片识别App
Feb 18 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 #Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 #Javascript
bootstrap中添加额外的图标实例代码
Feb 15 #Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 #Javascript
js实现模糊匹配功能
Feb 15 #Javascript
js 性能优化之算法和流程控制
Feb 15 #Javascript
微信小程序 常用工具类详解及实例
Feb 15 #Javascript
You might like
如何删除多级目录
2006/10/09 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
PDO::inTransaction讲解
2019/01/28 PHP
javascript 日期常用的方法
2009/11/11 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
TypeScript中的方法重载详解
2019/04/12 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
Python文件夹与文件的操作实现代码
2014/07/13 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
pandas通过索引进行排序的示例
2018/11/16 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
python绘制多个子图的实例
2019/07/07 Python
Django Rest framework频率原理与限制
2019/07/26 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Python 中如何写注释
2020/08/28 Python
python破解同事的压缩包密码
2020/10/14 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
医学专业毕业生推荐信
2013/11/14 职场文书
财务管理专业自荐信范文
2013/12/24 职场文书
产品销售计划书
2014/05/04 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python