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 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
ASP SQL防注入的方法
Dec 25 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
基于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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
php四种定界符详解
2017/02/16 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
奇妙的js
2007/09/24 Javascript
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
JS实现div居中示例
2014/04/17 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
python中偏函数partial用法实例分析
2015/07/08 Python
python中lambda()的用法
2017/11/16 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
django有哪些好处和优点
2020/09/01 Python
Python 解析xml文件的示例
2020/09/29 Python
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
银行演讲稿范文
2014/01/03 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
学用政策心得体会
2014/09/10 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书