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 拖拉缩放效果
Dec 10 Javascript
Jquery 设置标题的自动翻转
Oct 03 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
Js面试算法详解
Apr 08 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
vue postcss-px2rem 自适应布局
May 15 Vue.js
基于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
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
python issubclass 和 isinstance函数
2019/07/25 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
大学生求职简历的自我评价范文
2013/10/12 职场文书
毕业生自荐信的主要内容
2013/10/29 职场文书
班组安全员工作职责
2014/02/01 职场文书
企业安全生产承诺书
2014/05/22 职场文书
代办委托书怎么写
2014/08/01 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
导游词300字
2015/02/13 职场文书
入党转正介绍人意见
2015/06/03 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫