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 遍历验证所有文本框的值
Aug 27 Javascript
Extjs入门之动态加载树代码
Apr 09 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
AngularJS手动表单验证
Feb 01 Javascript
浅谈JS中json数据的处理
Jun 30 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
浅谈Vue.set实际上是什么
Oct 17 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
模仿OSO的论坛(四)
2006/10/09 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
js压缩利器
2007/02/20 Javascript
JQUERY获取form表单值的代码
2010/07/17 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
js Math 对象的方法
2013/09/01 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
js格式化时间的方法
2015/12/18 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
python实现2048小游戏
2015/03/30 Python
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
python内存管理机制原理详解
2019/08/12 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
python 基于opencv操作摄像头
2020/12/24 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
幼儿园中班教学反思
2014/02/10 职场文书
产品包装策划方案
2014/05/18 职场文书
保护环境倡议书300字
2014/05/19 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书