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判断60秒以及倒计时示例代码
Jan 24 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
基于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
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
JavaScript中的作用域链和闭包
2012/06/30 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
SVM基本概念及Python实现代码
2017/12/27 Python
使用Python写一个小游戏
2018/04/02 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
python队列Queue的详解
2019/05/10 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
建材业务员岗位职责
2013/12/08 职场文书
经济管理专业自荐信
2013/12/30 职场文书
服务质量承诺书
2014/03/27 职场文书
公司奖励通知
2015/04/21 职场文书
2019军训心得体会
2019/06/27 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python