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实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
Vue.js学习示例分享
Feb 05 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 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
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
Pandas中把dataframe转成array的方法
2018/04/13 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
python绘制高斯曲线
2021/02/19 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
祖国在我心中演讲稿200字
2014/08/28 职场文书
公司租房协议书范本
2014/10/08 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
民主生活会意见
2015/06/05 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
使用MybatisPlus打印sql语句
2022/04/22 SQL Server