<!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. IT从业人员必看的十几个论坛

    IT方面的论坛太多了,有综合,有专业,有行业,在各个论坛里混了几年,体会颇深,以前是论坛哪里人多,往哪里去,新浪论坛,网易是经常去的,人多啊,好几十万,去了以后才发现没有意思,没有共同的语言,于是逛专 ...

  2. string内存管理

    本人从事.net开发快两年了,一直认为鄙人的C++基础还是很扎实的,并且对Windows操作系统也有一定认识(Linux系就真比较少用),刚毕业的时候,也曾经经常研究游戏破解之类的小外挂,那时候真是折 ...

  3. docker安装caffe

    [最近一直想要学习caffe,但是苦苦纠结于环境安装不上,真的是第一步都迈不出去,还好有docker的存在!下面,对本人如何利用docker安装caffe做以简单叙述,不属于教程,只是记录自己都做了什 ...

  4. JDK神坑：JAVA中Calendar的月份Month少1

    很多朋友在使初次使用Calendar时,会发现月份莫名其妙对不上,显示的结果总是比预期中小1个月,检查好几遍也没发现程序有错,于是开始抓狂.其实这个时候,只要去看JDK就会明白问题所在.JDK告诉我们 ...

  5. C语言里的指针探析——type *name[] 在函数参数里面，是一个二维指针

    type *name[] 在函数参数里面声明和不在函数里面声明其实不一样. type *name[] 如果在函数参数里声明,则name 是一个二维指针,并不是一个指针数组,而如果不在函数参数里声明,则 ...

  6. delphi xe5 android 服务端和手机端的源码下载

    xe5 android的服务端和手机客户端的源代码下载地址 http://files.cnblogs.com/nywh2008/AndroidTest.rar

  7. XSS测试用例与原理讲解

    1.<a href="javascript:alert(32)">DIBRG</a>2.<img href="javascript:aler ...

  8. Linq 取差集 交集等

    string goodsList = context.Request.Form["goodsList"]; if (!string.IsNullOrEmpty(goodsList) ...

  9. TEA算法

    我们要讨论的最后一个分组密码加密算法是TEA(Tiny Encryption Algorithm).到目前为止,我们在前面所呈现的连线图可能会使你得出如下结论:分组密码加密算法必须是复杂的.TEA却能 ...

  10. 2-3 tree使用

    The 2-3 tree is also a search tree like the binary search tree, but this tree tries to solve the pro ...