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. AJAX POST&跨域 解决方案 - CORS（转载）

    跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免 ...

  2. c# 隐藏 控制台应用程序

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  3. [转]MongoDB for Java】Java操作MongoDB

    原文地址: MongoDB for Java]Java操作MongoDB 开发环境: System:Windows IDE:eclipse.MyEclipse 8 Database:mongoDB 开 ...

  4. Android studio删除工程项目，androidstudio

    本新手最近学Android都是用的eclipse.其实个人觉得eclipse不错,可能接触Android不久,倒也不觉得它慢还是怎样.对于Google的Android studio也是早有耳闻,前两天 ...

  5. javascript 异常处理和事件处理

    异常捕获 1.异常:当javascript引擎执行JS代码时,发生了错误,导致程序停止运行. 2.异常抛出:当异常产生,并且将这个异常生成一个错误信息 3.异常捕获: try{发生异常的代码块:}ca ...

  6. 面向切面编程AOP：基于注解的配置

    Aop编程就是面向编程的羝是切面,而切面是模块化横切关注点. -切面:横切关注点,被模块化的特殊对象. -通知:切面必须要完成的工作 -目标:被通知的对象 -代理:向目标对象应用通知之后创建的对象. ...

  7. 夺命雷公狗ThinkPHP项目之----企业网站7之栏目的修改（主要用模型来验证字段）

    我们照老,在控制器里面先查出我们所需要用到的数据: 然后直接遍历到模版上即可: 然后再开始写提交过来的数据处理问题(注意一定要接收修改页面通过隐藏域)而且我们刚才已经写好我们的model层了,所以直接 ...

  8. 夺命雷公狗---DEDECMS----32dedecms电影网评价星星功能的实现

    我们要完成的是电影网的评价功能: 我们要做这个功能前,就要让前期工作准备好,首先让鼠标移动到星星时,星星的左边都是黄色的星星右边还是灰星星. 我们打开内容页的模版看下他代码是如何组成的: 我们在这里可 ...

  9. 记centos7中的network.service启动失败

    查看启动失败的服务: systemctl --failed 然后就发现了一个叫network.service 的服务启动失败了. 后来找到了原因, 是因为配置文件中没有写上网卡的硬件地址 配置文件所在 ...

  10. 关于teleport_pro使用过程中的一点疑惑

    在我新建工程的时候,有两个选项,一个是"new project wizard"另一个是"new project",然后就纠结了,我应该使用那个呢? 使用第一个的 ...