<!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. php接收二进制数据流转换成图片

    <?php /** * 图片类 * @author Haroldphp@163.com * @version 1.0 * PHP默认只识别application/x-www.form-urlen ...

  2. Tasklist 命令的使用

    1,根据PID查找进程 tasklist /fi "pid eq 2245" 2,根据名称查找进程 tasklist /fi "imagename eq notepad. ...

  3. 格式化分区，报/dev/sdb1 is apparently in use by the system; will not make a filesystem here!

    [root@RAC2 ~]# mke2fs /dev/sdb1mke2fs 1.39 (29-May-2006)/dev/sdb1 is apparently in use by the system ...

  4. armv7a-mediatek451_001_vfp-linux-gnueabi-gcc: directory: No such file or directory 编译error

    release/vm_linux/output/hisense_android/mt5399_cn_android_JB/rel/obj/oss/source/arm_mali_ko/mali400- ...

  5. jquery点击图片选中特效

    jquery点击图片选中特效 点击在线预览效果

  6. word中的表格空白部分整不掉，下面的表格拉不上来

    是因为下页的表格太大,占据了一页,要把下面的表格拉小一点

  7. VMware配置回环地址用于测试

           我们在开发过程中,很可能需要一台服务器用于测试,在这种环境下,我们很可能需要用到vmware来构建这样的开发环境.但如果当前处在一个离线,或是不在网内的环境下,我们所搭建的环境有可能无法 ...

  8. 主线程中有多个handler的情况

    工作中遇到了这么一种情况,有两个视图,都需要开启异步任务从服务器获取数据,每个view中创建一个Handler,注册到异步任务中去,当异步任务从服务器获取数据出错,或者出现io异常或者http协议异常 ...

  9. 2.5.6 使用progressDialog创建进度对话框

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout ...

  10. 子查询解嵌套in改写为exists

    SELECT * FROM (SELECT pubformdat0_.id id332_, pubformdat0_.domain_id domain2_332_, pubformdat0_.proc ...