<!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. 类集对enum的支持。

    1,EmumMap public class EnumMap<K extends Enum<K>,V>extends AbstractMap<K,V>impleme ...

  2. iOS之手势滑动返回功能－b

    iOS中如果不自定义UINavigationBar,通过手势向右滑是可以实现返回的,这时左边的标题文字提示的是上一个ViewController的标题,如果需要把文字改为简约风格,例如弄过箭头返回啥的 ...

  3. 【转载】TCP保活（TCP keepalive）

    下图是我遇到tcp keepalive的例子: 以下为转载: TCP保活的缘起 双方建立交互的连接,但是并不是一直存在数据交互,有些连接会在数据交互完毕后,主动释放连接,而有些不会,那么在长时间无数据 ...

  4. Python+django部署（一）

    之所以 写这篇文章的原因在于django环境的确轻松搭建,之前Ubuntu上安装了,的确很轻松,但是后期我才知道随便做个环境出来很容易到了后面很麻烦,污 染了系统里的python版本,导致系统pyth ...

  5. BZOJ 1640: [Usaco2007 Nov]Best Cow Line 队列变换

    Description FJ打算带着他可爱的N (1 ≤ N ≤ 2,000)头奶牛去参加"年度最佳老农"的比赛.在比赛中,每个农夫把他的奶牛排成一列,然后准备经过评委检验. 比赛 ...

  6. 加JENKINS的SLAVE节点（LINUX）要注意的事项

    从昨天下午到现在,终于解决了所有的问题.作如下记录要点: 1,从节点只要建好目录,JENKINS的包,MASTER会推送过来. 2,ANT,MAVEN之类的,要配置好环境变量,PROFILE.D .B ...

  7. [topcoder]KingdomReorganization

    http://community.topcoder.com/stat?c=problem_statement&pm=11282&rd=14724 这道题是最小生成树,但怎么转化是关键. ...

  8. [转贴]C++、C#写的WebService相互调用

    以下宏文(原文在 http://blog.sina.com.cn/s/blog_4e7d38260100ade4.html),是转贴并进行了修饰编辑: 首先感谢永和兄提供C++的WebService服 ...

  9. Seattle(65) lypzxy的博客

    http://www.cnblogs.com/cb168/tag/Firemonkey/

  10. Android Training精要（七）内存管理

    在2.3.3及以下版本: 通過定義兩個整形變量來檢測bitmap是否display過或者已經在緩存中 下面的代碼當bitmap滿足兩個條件就被回收掉: 1. 兩個整形變量都變為0 2. bitmap不 ...