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 相关文章推荐
jquery 新浪网易的评论块制作
Jul 01 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 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
分享常见的几种页面静态化的方法
2015/01/08 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
Python字符串详细介绍
2015/05/09 Python
python套接字流重定向实例汇总
2016/03/03 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
python如何控制进程或者线程的个数
2020/10/16 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
python 实现图片批量压缩的示例
2020/12/18 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
承诺书样本
2014/08/30 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
六年级情感作文之500字
2019/10/23 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android
在Docker容器中部署SQL Server
2022/04/11 Servers