<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             .bg{

                 border:1px solid black;

                 display:none;

                 position:fixed;

                 width:100%;

                 height:100%;

                 background:#000;

                 z-index:2;

                 top:0;

                 left:0;

                 opacity:0.5;

                 }

             .content{

                 display:none;

                 width:500px;

                 height:300px;

                 position:fixed;

                 top:50%;

                 margin-top:-150px;

                 background:#fff;

                 z-index:3;

                 left:50%;

                 margin-left:-250px;}

         </style>

     </head>

     <body>

         <div class="click">点击这里</div>

         <div class="bg"></div>

         <div class="content">这里是正文内容</div>

         <script src="js/jquery-1.11.0.min.js"></script>

         <script>

             $(function(){

                 $('.click').click(function(){

                     $('.bg').css({'display':'block'});

                     $('.content').css({'display':'block'});

                 });

                 $('.bg').click(function(){

                     $('.bg').css({'display':'none'});

                     $('.content').css({'display':'none'});

                 });

             });

         </script>

     </body>

 </html>

运行结果

JavaScript实现遮罩层的更多相关文章

  1. java javaScript实现遮罩层 动态加载

    通过java.JavaScript和css实现点击按钮后出现灰色遮罩层,并显示动态加载的字样,提高用户体验,废话不多说,上代码(写这个博客的原因是网上代码太多新手根本不知道哪里对哪里,这里剔除所有无关 ...

  2. jQuery弹出遮罩层效果完整示例

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

  3. 【Javascript Demo】遮罩层和百度地图弹出层简单实现

    其实想做的就是显示百度地图的弹出层,现在已经简单实现了.示例和代码如下,点击按钮可以看到效果: 1.示例:   2.代码: <!DOCTYPE html PUBLIC "-//W3C/ ...

  4. 【Javascript Demo】遮罩层和弹出层简单实现

    最近纠结于遮罩层和弹出层的实现,终于搞定了个简单的版本.示例和代码如下,点击按钮可以看到效果: 1.示例: 2.代码: <!DOCTYPE html PUBLIC "-//W3C//D ...

  5. 【Javascript Demo】谷歌地图简单实现（附遮罩层和弹出层实现）

    虽然百度地图实现了,但只是国内的,而且前几天貌似还出问题了,对于国际的只能用谷歌地图了,所以就简单研究了下,做了个差不多的. 基本步骤,谷歌地图API文档其实写的很清楚了,先获取API密钥,然后引用j ...

  6. 用JavaScript实现CheckBox的全选取消反选，及遮罩层中添加内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jQuery遮罩层登录对话框

    用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度 ...

  8. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  9. jQuery弹出关闭遮罩层

    效果体验:http://keleyi.com/keleyi/phtml/jquery/9.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

随机推荐

  1. 【 java版坦克大战--事件处理】 坦克动起来了

    折腾了这么久,坦克总算能动了.只贴代码编辑不给上首页,花了半个小时的时间写了n多注释. 再顺便把绘图的原理发在这里: 绘图原理 Component类提供了两个和绘图有关的重要方法: ①   paint ...

  2. corosync+pacemaker and drbd实现mysql高可用集群

    DRBD:Distributed Replicated Block Device 分布式复制块设备,原理图如下 DRBD 有主双架构和双主架构的,当处于主从架构时,这个设备一定只有一个节点是可以读写的 ...

  3. insert遭遇阻塞

    insert的阻塞确实不常见,今天碰到了一个,看书又了解一个,整理下.1.多个会话同时向unique字段插入相同的值session1:首先建测试表test,并在字段id上创建一个主键索引(唯一键也可以 ...

  4. linux中C的静态库和动态库分析

    从开始学C语言写第一个"hello world"历程到现在,我依然困惑于到底这个程序完整的执行流程是什么样的.不过,现在我正在尝试一点一点的揭开它的面纱.现在,我尝试分析linux ...

  5. TCP/IP入门学习（1）---分层概述

    本文旨在记述一些学习中的笔记 OSI分层:应用层,表示层,会话层,传输层,网络层,数据链路层,物理层 详细点: 1.应用层:为应用程序提供服务并规定程序中通信相关细节. 2.表示层:将应用处理的信息转 ...

  6. sublime部署开发环境

    安装nodejs 去官网下载安装,暂时不建议安装5.0以上版本. 命令行运行以下命令查看是否安装成功: 全局安装gulp $ npm install -g gulp 全局安装requirejs 压缩资 ...

  7. 用Thread类创建线程-2

    支持原创,本系列文章均转自:http://www.blogjava.net/nokiaguy/category/38172.html 在Java中创建线程有两种方法:使用Thread类和使用Runna ...

  8. bzoj 2482: [Spoj GSS2] Can you answer these queries II 线段树

    2482: [Spoj1557] Can you answer these queries II Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 145 ...

  9. 计算几何模板 (bzoj 1336，poj 2451 ,poj3968)

    poj 3968 (bzoj 2642) 二分+半平面交,每次不用排序,这是几个算几版综合. #include<iostream> #include<cstdio> #incl ...

  10. 解决iOS应用内购买报错:invalidProductIdentifiers

    当写完IAP业务过程后,点击测试却发现没有返回成功的商品Id,反而返回了无效的商品:response.invalidProductIdentifiers 这种情况下考虑以下因素: 创建的App ID是 ...