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. XCODE中的蓝色文件夹与黄色文件夹

    XCODE中的蓝色文件夹与黄色文件夹 黄色文件夹比较常见 - group , 在XCODE中以文件夹的形式存在,有层次感,但是实际文件在工程下是散乱的,没有层级结构.是XCODE中虚拟目录. 蓝色文件 ...

  2. system(linux) power on note

    读詹荣开文档摘 BIOS 在完成硬件检测和资源分配后,将硬盘 MBR 中的 Boot Loader 读到系统的 RAM 中,然后将控制权交给 OS Boot Loader Boot Loader执行全 ...

  3. 自动档车的P档和N档的区别

    P档时,驻车齿轮在变速箱内被部分锁死,所以此时平地上不踩刹车,车辆有一定的驻车效果.N档就是空档,发动机与传动轴在变速器位置彻底分离,没有连接.因此P档适合停车和驻车,就是到地方了,要熄火时挂P档,拉 ...

  4. mongodb的基本操作与插入文档(document)

    一.mongodb的基本操作: 1.查看mongodb当前所有的databases : show dbs 2.选择数据库(database) : use databaseName(该数据库不存在则会自 ...

  5. 不等高cell的tableView界面搭建

    一.搭建界面 1.界面分析 分析界面的层次结构,分析界面应该用什么控件来搭建 2.界面层次结构 分析之后,我们可以把这个界面分为四个模块(topView middleView commentView ...

  6. PHYLIP linux安装

    PHYLIP的安装: http://download.chinaunix.net/download.php?id=29483&ResourceID=8135下载 gunzip phylip-3 ...

  7. CollectionView添加头尾部

    //上下拉头尾部 self.collectionView.footer = [MJRefreshBackNormalFooter footerWithRefreshingTarget:self ref ...

  8. 使用git做服务器端代码的部署

    传统部署方案     windows 远程桌面     FTP/SFTP     登录服务器pull github代码     Phing(PHP专业部署工具) git 自动部署流程图   服务器端准 ...

  9. ios pyudaren

    ed2k://|file|%E9%A1%B9%E7%9B%AE%E6%8D%95%E9%B1%BC%E8%BE%BE%E4%BA%BA01.rmvb|67044010|9e013987298d7900 ...

  10. paper 20 ：color moments

    图像的颜色特征是很重要的,其中颜色矩也是很重要的一部分.(还有一个关于图像颜色特征的review,对于image color写的比较全面).还有,我要强调一下,本blog上的链接都是Google学术上 ...