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 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
JavaScript下申明对象的几种方法小结
Oct 02 Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 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
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
jQuery设计思想
2017/03/07 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
python自动化测试实例解析
2014/09/28 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
Python3并发写文件与Python对比
2019/11/20 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
opencv python图像梯度实例详解
2020/02/04 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
python中xlrd模块的使用详解
2021/02/01 Python
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
房屋转让协议书范本
2014/04/11 职场文书
疾病防治方案
2014/05/31 职场文书
安全目标管理责任书
2014/07/25 职场文书
市场策划求职信
2014/08/07 职场文书
毕业论文致谢范文
2015/05/14 职场文书
期中考试后的感想
2015/08/07 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP