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 相关文章推荐
js捕获鼠标滚轮事件代码
Dec 16 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
Express 配置HTML页面访问的实现
Nov 01 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
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
python搜索包的路径的实现方法
2019/07/19 Python
python多进程使用函数封装实例
2020/05/02 Python
keras 权重保存和权重载入方式
2020/05/21 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
英语商务邀请函范文
2014/01/16 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014年节能工作总结
2014/12/18 职场文书
入党现实表现材料
2014/12/23 职场文书
财务工作失误检讨书
2015/02/19 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL