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. Effective C++ 2.构造 析构 赋值运算

    //条款07:为多态基类声明virtual析构函数 // 1.若基类的析构函数不定义为虚函数,由于基类的指针或引用可以指向派生类的对象,则在删除基类对象的时候可能会出错,导致破坏数据结构. // 2. ...

  2. struts2 标签字体大小

    <style type="text/css"> label{ font-size: 20px; } </style> <s:textfield nam ...

  3. [原创]java WEB学习笔记86：Hibernate学习之路-- -映射 n-n 关系,单向n-n，双向n-n

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  4. JSon_零基础_003_将Map集合对象转换为JSon格式的对象字符串，返回给界面

    将Map集合对象转换为JSon格式的对象字符串,返回给界面 需导入的jar包: 编写servlet: package com.west.webcourse.servlet; import java.i ...

  5. CSS3 Transform Matrix

    css3中的transform让我们操作变形变得很简单,诸如,translate–移动,scale–缩放,rotate–旋转,skew–斜切.这几个属性很方便,也很简单,但是其中matrix我们就不常 ...

  6. java 字符串转json,json转对象等等...

    @RequestMapping(value = "updateInvestorApplyAccountNo", method = RequestMethod.POST) @Resp ...

  7. lower power的IP设计

    在IP的实现过程中,考虑lower power部分进行设计: 1)Partition the design来满足lower power的一些strategies,尤其是power gating和clo ...

  8. Android2.2快速入门 zz

    http://www.cnblogs.com/over140/archive/2010/09/27/1836567.html 前言 这是前段时间用于公司Android入门培训的资料,学习Android ...

  9. php正则表达式and数组

    <?php //正则表达式 //斜杠代表定界符 /^$/ /* $str="abcde123fg456h"; $reg="/\d/"; echo preg ...

  10. [python] No module named _sysconfigdata_nd

    when setting python environment in Ubuntu13.04, i got this error: ImportError: No module named _sysc ...