<!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. 经典的C程序

    程序一:打印出所有的“水仙花数”,所谓“水仙花数”是指一个三位数,其各位数字立方和等于该数 #include<stdio.h> void main(){ int a, b, c, i; ; ...

  2. REST API之前端跨域访问

    关键字:跨域访问,cross-origin, NodeJS, REST API, JavaScript, Access-Control-Allow-Origin 1.新建并运行一个 NodeJS的se ...

  3. java中关于移位运算符的demo与总结

    首先,移位运算符有三种,其操作类型只支持:byte / short / char / int和long五种. << 左移运算符,表示将左边的操作数的二进制数据向左移动*位,移动后空缺位以0 ...

  4. git 常用命令行整理

    1.创建分支dev git branch dev 2.切换到dev分支 git checkout dev 3.创建并切换本地分支,分支名为dev git checkout -b dev 4.查看本地所 ...

  5. mysql 时间字段的函数 timestamp

    Mysql 里格式 时间字段的函数 DATE_FORMAT unix_timestamp - 墨墨修行的日志 - 网易博客http://jjuanxi.blog.163.com/blog/static ...

  6. poj 1132

    暑假集训做的第一个题,模拟,挺简单的,不过要细心点... 没什么好说的,直接贴代码: #include<cstdio> #include<cstring> using name ...

  7. hdu 4722

    比赛的时候这道题一直都没出来,承启提醒我之后还是一直WA: 其实规律早就找到了```` 其实这题还可以用数位dp来做,不过从来没写过,以后再贴: 代码: #include<iostream> ...

  8. Wild Words

    poj1816:http://poj.org/problem?id=1816 题意:给你n个模板串,然后每个串除了字母,还有?或者*,?可以代替任何非空单个字符,*可以替代任何长度任何串,包括空字符串 ...

  9. HttpResponseCache 网络缓存使用

    Caches HTTP and HTTPS responses to the filesystem so they may be reused, saving time and bandwidth. ...

  10. Android自定义View带有删除按钮的EditText

    转载请注明出处http://blog.csdn.net/xiaanming/article/details/11066685 今天给大家带来一个很实用的小控件ClearEditText,就是在Andr ...