HTML

<html>
　　<head>
　　　　<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
　　　　<script src="Jquery.js" type="text/javascript"></script>
　　　　<script src="JavaScript.js" type="text/javascript"></script>
　　</head>
　　<title>Title</title>
　　<body>
　　　　<div id="bodydiv">
　　　　　　<input type="button" id="buttonshow" value="显示" />
　　　　　　<div id="divpopup">
　　　　　　　　<input type="button" id="buttonclose" value="关闭"/>
　　　　　　</div>
　　　　　　<div id="divcover">
　　　　　　</div>
　　　　</div>
　　</body>
</html>

JS(JavaScript.js)

$(function(){
　　$("#buttonshow").click(function(){
　　　　$("#divcover").css("height",$(document).height());
　　　　$("#divcover,#divpopup").show(1000).css("display","block");
　　　　$("#buttonshow").hide(1000);
　　　　$("#buttonclose").click(function(){
　　　　　　$("#divcover,#divpopup").hide(1000);
　　　　　　$("#buttonshow").show(1000);
　　　　});
　　});
});

CSS(StyleSheet.css)

#divpopup
{
　　display:none;
　　position:fixed;
　　z-index:1002;
}
#divcover
{
　　width: 100%;
　　height: 100%;
　　top: 0px;
　　left: 0px;
　　background-color: Gray;
　　position: absolute;
　　display: none;
　　z-index: 1001;
　　opacity:0.50;
}

源码下载：http://files.cnblogs.com/zisezhixin/遮罩层.zip

JQuery-遮罩层的更多相关文章

  1. jQuery遮罩层登录对话框

    用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度 ...

  2. jQuery遮罩层的实现

    遮罩层其实就是一个占据整个页面的半透明效果的页面元素,一般用div实现.页面中实现遮罩层,无非就是为了让用户只能操作弹出窗口的内容,而不允许操作弹出窗口外的内容. 在实现时,我使用了两个div,一个遮 ...

  3. jQuery遮罩层插件

    在网页上常常遇到须要等待非常久的操作,比方导出报表等.为了预防用户点击其它操作或者多次点击同个功能,须要用遮罩层把页面或者操作区盖住.防止用户进行下一步操作.同一时候能够提高界面友好度,让用户知道操作 ...

  4. jquery 遮罩层显示img

    如果点击iframe中的image显示整个页面的遮罩层,可参考如下: http://blog.csdn.net/shiaijuan1/article/details/70160714 具体思路就是,顶 ...

  5. jquery遮罩层

    (function () { //遮罩层实现 zhe zhao ceng kexb 2016.2.24 $.extend($.fn, { mask: function (msg, maskDivCla ...

  6. jQuery遮罩层效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. JQuery 遮罩层弹窗

    var str = "<div id=\"zhezhao\" style=\"display:none; background-color: rgba(0 ...

  8. jquery 遮罩层指定位置

    .css .datagrid-mask-msg { position: absolute; top: %; margin-top: -20px; padding: 12px 5px 10px 30px ...

  9. Jquery实现遮罩层，就是弹出DIV周围都灰色不能操作

    <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC & ...

  10. jquery实现div遮罩层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. npm 介绍

    安装NPM NPM的全称是Node Package Manager,如果你熟悉ruby的gem,Python的PyPL.setuptools,PHP的pear,那么你就知道NPM的作用是什么了.没 错 ...

  2. Swift游戏实战-跑酷熊猫 03 熊猫跑动动画

    这节内容,我们一起来利用SKAction的来为熊猫创建动画,我们将学会通过纹理组产生动画,使用永远循环的SKAction让熊猫不停的跑动. 要点: 枚举的使用:用来记录熊猫的动作状态 enum Sta ...

  3. Leetcode: Trapping Rain Water II

    Given an m x n matrix of positive integers representing the height of each unit cell in a 2D elevati ...

  4. C++引用（References）

    1.C++引用: 引用就是某一变量(目标)的一个别名, 相当于同一个人有了两个名字, 无论喊哪一个名字实际上都是指的同一个人. 同样, 在引用上, 对引用的操作与对变量直接操作的效果完全一样, 因此, ...

  5. [转]java工程师成神之路

    转载http://www.hollischuang.com/archives/489https://linux.cn/article-6739-1.html 一.基础篇 1.1 JVM 1.1.1. ...

  6. GitHub和SourceTree入门教程——(转载),希望能帮到有需要的人

    -->本教程适用于主流的开源网站github和bitbucket,个人认为sourceTree还是比较好用的git客户端,支持windows和mac os. -->soureceTree的 ...

  7. mybatis(一)安装

    1.创建web项目,添加jar包 2.创建实验表user_t 3.在src下创建conf.xml文件,如下 <?xml version="1.0" encoding=&quo ...

  8. 仅支持webkit浏览器的多行内容超出显示省略号

    .box { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; ...

  9. 如何设置DB2I（SPUFI)来正常工作

    首先确定你现在所使用的登录proc,确保有权限可以在对应的PDS内新建member,可以在s.st里面找userid对应的job,然后去serach using,基本可以找到对应的dataset 用t ...

  10. GLSL第一个程序

    拿出来直接运行即可,可以直接理解什么是GLSL,之所以贴出来是因为很多文章写得乱七八糟,一面解释,一面贴代码,有必要吗??很多GLSL电子书都有很详细的解释的. 我的OpenGL框架代码可能和你的框架 ...