1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>遮盖层</title>
  6.         <style>
  7.             /* 登录层 */
  8.             #choose{
  9.                 display:none;
  10.                 width:360px;
  11.                 height:230px;
  12.                 background:#69F;
  13.                 position:absolute;
  14.                 top:%;
  15.                 left:%;
  16.                 z-index:;
  17.                 opacity:0.8;                        /*背景的透明度:(Firefox适用；）*/
  18.                 filter:alpha(opacity =);          /*背景的透明度:(IE适用)；*/
  19.                 }  
  20.  
  21.             /*遮罩层*/
  22.             #mid{
  23.                 display:none;
  24.                 width:%;
  25.                 height:%;
  26.                 background:#;
  27.                 position:absolute;
  28.                 top:;
  29.                 left:;
  30.                 z-index:;
  31.                 opacity:0.4;                        /*背景的透明度:(Firefox适用；）*/
  32.                 filter:alpha(opacity =);          /*背景的透明度:(IE适用)；
  33.                 }
  34.         </style>
  35.         </head>
  36.         <body>
  37.              <a href="#" class="click">点击按钮</a>
                  <!--填充内容开始 往body里面写点内容，因为遮盖层要通过body去获取界面的高宽度，从而body的高宽同时决定了遮盖层的高宽。但是码友们在平时运用这个demo的时候，由于所写body的代码肯定是有的，而且是比较多的，所以一定要忽略我下面填充的内容->
  38.             1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br />
                1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />
                <!-- 填充内容结束 --> 
            <!-- 表单层 -->
  39.         <div id="choose">  
  40.  
  41.         <!-- 表单头部 -->
  42.             <a class=close>关闭</a>
  43.             <table>
  44.                 <tr>
  45.                     <td colspan="3" class="td">
  46.                     </td>
  47.                 </tr>
  48.                 <tr>
  49.                     <td class="td1">登录名：</td>
  50.                     <td class="td2"><input type="text"/></td>
  51.                     <td class="td3">*</td>
  52.                 </tr>
  53.                 <tr>
  54.                     <td class="td1">密&nbsp;码：</td>
  55.                     <td class="td2"><input type="password"/></td>
  56.                     <td class="td3">*</td>
  57.                 </tr>
  58.                 <tr>
  59.                     <td class="td1">验证码：</td>
  60.                     <td class="td2"><input type="text"/></td>
  61.                     <td class="td3">*</td>
  62.                 </tr>
  63.                 <tr>
  64.                     <td colspan="3" align="center"><input type="submit" value="登陆"/></td>
  65.                 </tr>
  66.             </table>
  67.         </div>  
  68.  
  69.         <!-- 遮盖层 -->
  70.         <div id="mid"></div>
  71.     </body>
  72.     <script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>
  73.         <script>
  74.             $(function(){
  75.                 $(".click").click(function(){
  76.                     var bh = $("body").height();  //获取当前浏览器界面的高度
  77.                     var bw = $("body").width();   //获取当前浏览器界面的宽度
  78.                 $("#mid").css({
  79.                     height:bh,      //给遮盖层的div的高宽度赋值
  80.                     width:bw,
  81.                     display:"block"  //遮盖层显示
  82.                 });
  83.                 $("#choose").show();
  84.             });
  85.             $(".close").click(function(){
  86.                 $("#choose").hide();
  87.                 $("#mid").hide();
  88.             });
  89.         });
  90.     </script>
  91. </html>

遮盖层实现（jQuery+css+html）的更多相关文章

  1. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  2. jquery css事件编程 尺寸设置

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

  3. jquery css事件编程 位置 操作

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

  4. jQuery & CSS 制作金属质感的选择按钮

    如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果. 在线演 ...

  5. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  6. 复习练习（03）jquery Css方法一步步升级

    jquery Css方法一步步升级 <script src="jquery-1.8.3.js"></script> <script type=&quo ...

  7. jQuery CSS 的操作函数

    jQuery CSS 操作函数 下面列出的这些方法设置或返回元素的 CSS 相关属性. CSS 属性 描述 css() 设置或返回匹配元素的样式属性. height() 设置或返回匹配元素的高度. o ...

  8. Jquery+css实现图片无缝滚动轮播

    Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...

  9. jQuery css,position,offset,scrollTop,scrollLeft用法

    jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...

随机推荐

  1. CodeForces 718C Sasha and Array

    线段树. 线段树维护区间矩阵和,操作都是最简单的线段树.$lazy$标记不要记录乘了几次,直接记录乘了几次之后的矩阵就可以了,不然每次下传的时候再算一遍时间复杂度会提高. #pragma commen ...

  2. Qdocconf 写法

    Qdocconf 文件可以写在单独的一个文件里, 也可以使用include 命令包含其它文件. Qdocconf 文件有两类输出: html 和 DITA XML格式.两种格式的差别是,html格式需 ...

  3. C# ObjectHelper

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

  4. logstash通过kafka传输nginx日志（三）

    单个进程 logstash 可以实现对数据的读取.解析和输出处理.但是在生产环境中,从每台应用服务器运行 logstash 进程并将数据直接发送到 Elasticsearch 里,显然不是第一选择:第 ...

  5. PHP判断一个变量是否可以通过foreach进行遍历

    <?php if( !is_array( $items ) && !$items instanceof Traversable ) //Throw exception here ...

  6. const 那点事儿

    修饰变量时 const char 与 char const 是等价的,例如 const char a = 'a'; char const a = 'a'; 表示变量a不能再被赋予其他值. 到指针时情况 ...

  7. Android 不能返回 parent Activity 的问题

    使用 ActionBar,开启返回按钮: 在 Activity 的 onCreate 中添加下面代码 getSupportActionBar().setDisplayHomeAsUpEnabled(t ...

  8. 【Android】策略模式封装百度地图路线规划模块

    百度地图的Demo里有个路线规划的功能,但是,这个功能和Activity耦合性太高,所以需要单独抽离出路径规划功能,进行"解耦". 注:由于项目原因,本文只针对驾车路线规划进行封装 ...

  9. putty 使用 注意事项

    putty命令行模式,修改文本 小心数字小键盘 变命令!! 务必在putty--选项 Terminal->Features 里,找到 Disable application keypad mod ...

  10. 【Time系列三】简单的计时器(秒表)

    之前在 "for与while的洪荒之力" 中介绍到计时器,不过那样弄感觉好麻烦啊, 碰巧昨天学Java的时候,讲到求余可以用来求时间 ! for与while链接: http://w ...