先引入jq代码,然后代码如下:

$(function(){

 var docHeight = $(document).height(); //获取窗口高度

 $('body').append('<div id="overlay"></div>');

 $('#overlay')
.height(docHeight)
.css({
'opacity': ., //透明度
'position': 'absolute',
'top': ,
'left': ,
'background-color': 'black',
'width': '100%',
'z-index': //保证这个悬浮层位于其它内容之上
}); setTimeout(function(){$('#overlay').fadeOut('slow')}, ); //设置3秒后覆盖层自动淡出
});

jq给页面添加覆盖层遮罩的实例的更多相关文章

  1. 页面添加 mask 遮罩层

    var mask = function(){ $('<div>').css({ position: 'fixed', left: 0, top: 0, width: '100%', hei ...

  2. ToolkitScriptManager vs. ScriptManager 关于“只能向页面中添加 ScriptManager 的一个实例”讨论

    在使用ASP.NET设计AJAX功能网页时,需要首先声明ToolkitScriptManager或者ScriptManager控件,这些全局的脚本核心控制,然后才能使用众多的AJAX控件.如果没有创建 ...

  3. 如何给你的ASP.NET页面添加HelpPage

    如何给你的ASP.NET页面添加HelpPage 最近写了一些webAPI,所以需要搞一套API的帮助文档,google了一下,发现这是可以自动生成的,以下就是如何自动生成HelpPage的说明. 参 ...

  4. 基于jQ+CSS3页面滚动内容元素动画特效

    今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...

  5. angularjs中向html页面添加内容节点元素代码段的两种方法

    第一种方式:原生JS向html页面添加内容节点元素代码段: <!DOCTYPE html> <html> <head> <meta charset=" ...

  6. 如何在MVC_WebAPI项目中的APIController帮助页面添加Web测试工具测试

    本文转载自:http://www.cnblogs.com/pmars/p/3673811.html 先看效果图: 以下是原文: 如何在帮助页面添加测试工具 上一篇我在ASP.NET里面添加了一个Hel ...

  7. Magento给新产品页面添加分页

    本文介绍如何让magento创建一个带分页功能的新到产品页面,方便我们在首页或者其它CMS Page调用和展示新到产品. 在Magento我们经常有的做法是建立一个可以调用新产品的block,然后通过 ...

  8. 如何给magento的产品页面添加返回按钮

    如何给magento的产品页面添加返回按钮,最模板提供教程 第一步: 打开 E:\xampp\htdocs\magento\skin\frontend\default\bluescale\css\st ...

  9. jquery弹出关闭遮罩层实例

    jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...

随机推荐

  1. VScode Python no module的解决方法

    在lauch.json中,修改 "env": {}为 "env": {"PYTHONPATH":"${workspaceRoot} ...

  2. java-day20

    注解:说明程序的,给计算机看的 注释:用文字描述程序的,给程序员看的 定义:注解(Annotation),也叫元数据.一种代码级别的说明.它是JDK1.5及以后版本引入的一个特性.与类.接口.枚举是在 ...

  3. vue与webpack

    由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修 ...

  4. GitHub不能访问问题

    在C:\Windows\System32\drivers\etc文件夹下HOSTS里面最后添加: 192.30.253.112 github.com 192.30.253.113 github.com ...

  5. windows10,nodejs安装步骤

    系统: windows10 1.下载: https://nodejs.org/en/ 2.下载最新版本,根据你的系统选择32位或者64位: 3.建议选择源码源码安装,不选择编译后的安装 如: 4.进行 ...

  6. Android SDK 环境变量配置

    ANDROID_HOME = D:\Package\android-sdk-windows 在path 中加入 %ANDROID_HOME%\tools 和 %ANDROID_HOME%\platfo ...

  7. thinkphp 上传安全

    网站的上传功能也是一个非常容易被攻击的入口,所以对上传功能的安全检查是尤其必要的. 大理石平台支架 系统提供的上传类Think\Upload提供了安全方面的支持,包括对文件后缀.文件类型.文件大小以及 ...

  8. luoguP1415 拆分数列 [dp]

    题目描述 给出一列数字,需要你添加任意多个逗号将其拆成若干个严格递增的数.如果有多组解,则输出使得最后一个数最小的同时,字典序最大的解(即先要满足最后一个数最小:如果有多组解,则使得第一个数尽量大:如 ...

  9. 移动端图片轮播效果:depth模式总结

    最近公司app改版首页增加了一处轮播图效果,但是跟普通的轮播效果不同,是类似于下图的样式,找了一些兼容移动端的插件以及jQuery源码,总结一下使用心得: 1:jquery源码:缺点是在手机端的滑动很 ...

  10. Delphi 一些pas

    Delphi -- 创建 桌面.发送到....快速启动栏.开始菜单.程序菜单.右键菜 单 {====================================================== ...