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 美元符冲突的解决方法
Mar 28 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
Vue中computed及watch区别实例解析
Aug 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
构建简单的Webmail系统
2006/10/09 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
laravel5.6实现数值转换
2019/10/23 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
python中map()与zip()操作方法
2016/02/27 Python
常见python正则用法的简单实例
2016/06/21 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
python实现马丁策略的实例详解
2021/01/15 Python
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
2015年房地产销售工作总结
2015/04/20 职场文书
思品教学工作总结
2015/08/10 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android