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. SQL Server中使用正则表达式

    SQL Server 2005及以上版本支持用CLR语言(C# .NET.VB.NET)编写过程.触发器和函数,因此使得正则匹配,数据提取能够在SQL中灵活运用,大大提高了SQL处理字符串,文本等内容 ...

  2. git客户端

    https://git-for-windows.github.io/ http://blog.csdn.net/shulianghan/article/details/18812279 自己的gith ...

  3. Java基础之读文件——使用通道读取混合数据1(ReadPrimesMixedData)

    控制台程序,本例读取Java基础之写文件部分(PrimesToFile2)写入的Primes.txt. 方法一:可以在第一个读操作中读取字符串的长度,然后再将字符串和二进制素数值读入到文本中.这种方式 ...

  4. 二叉树的先序、中序以及后序遍历（递归 && 非递归）

    树节点定义: class TreeNode { int val; TreeNode left; TreeNode right; TreeNode(int x) { val = x; } } 递归建立二 ...

  5. Swift游戏实战-跑酷熊猫 10 视差滚动背景

    原理 实现 勘误 “实现”的视频中有个错误,如下 背景移动时有个错误,看红色部分,近景归位时,第二张图片的下标是1 if arrBG[0].position.x + arrBG[0].frame.wi ...

  6. From Disk partition to PostgreSQL installation

    From Disk partition to PostgreSQLinstallation [root@compute mnt]# fdisk /dev/sdb Welcome to fdisk (u ...

  7. logstash中的redis插件

    redis作为logstash中的官方broker,既有input插件,还有output插件. redis input插件 data_type属性: 有三种类型, list -> BLPOP - ...

  8. Yii多表关联

    表结构 现在有客户表.订单表.图书表.作者表, 客户表Customer    (id  customer_name) 订单表Order           (id  order_name       ...

  9. Workspace Cloning / Sharing in Jenkins

    http://lwandersonmusings.blogspot.com/2011/06/workspace-cloning-sharing-in-hudson.html   What's insi ...

  10. c#中 ==与equals有什么区别【转】

    转至http://www.zybang.com/question/2263895f201ffec6c68b6c304ac4cd61.html 对于值类型.引用类型来说比较过程怎样的?using Sys ...