遮罩层其实就是一个占据整个页面的半透明效果的页面元素，一般用div实现。页面中实现遮罩层，无非就是为了让用户只能操作弹出窗口的内容，而不允许操作弹出窗口外的内容。

在实现时，我使用了两个div,一个遮罩层id=overlay，一个是弹出窗id=dialog。

 <body>

      <div id="overlay"></div>

      <div id="dialog">点击弹出窗可以隐藏遮罩层</div>

      <a id="show" href="#">点击弹窗</a>

  </body>

有了页面结构后，接下来应该实现的是设置这些页面元素的样式，使遮罩层为透明的效果，并且开始时遮罩层和弹出窗口层都隐藏，实现的css如下：

#overlay{display:none;position:absolute;left:;top:;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=30);z-index:;-moz-opacity:0.5;

-khtml-opacity:0.5; }

#dialog{display:none;position:absolute;left:50%;top:50%;width:400px;height:400px;margin:-200px 0 0 -200px;border:5px solid  rgba(0,0,0,0.6);border-radius:5px;background:#fff;z-index:;}

要注意的是设置#dialog的z-index值要比#overlay的高，而#overlay的z-index要比一般的元素的高，这样才能达到遮罩住其它页面元素的效果，不允许用户再操作除了弹出窗的其它内容。

然后用jQuery来实现弹出和隐藏的动作吧，代码如下：

 $(document).ready(function(){

     $("#show").click(function(){

     showDg();

     });

     $("#dialog").click(function(){

     hideDg();

     });

 });

 //显示遮罩层和弹出窗

 function showDg(){

     $("#overlay").show();

     $("#dialog").show(100);

 };

 //隐藏遮罩层和弹出窗

 function hideDg(){

     $("#overlay").hide();

     $("#dialog").hide();

 };

 </script>

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

  1. jQuery遮罩层登录对话框

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

  2. jQuery遮罩层插件

    在网页上常常遇到须要等待非常久的操作,比方导出报表等.为了预防用户点击其它操作或者多次点击同个功能,须要用遮罩层把页面或者操作区盖住.防止用户进行下一步操作.同一时候能够提高界面友好度,让用户知道操作 ...

  3. jquery 遮罩层显示img

    如果点击iframe中的image显示整个页面的遮罩层,可参考如下: http://blog.csdn.net/shiaijuan1/article/details/70160714 具体思路就是,顶 ...

  4. jquery遮罩层

    (function () { //遮罩层实现 zhe zhao ceng kexb 2016.2.24 $.extend($.fn, { mask: function (msg, maskDivCla ...

  5. jQuery遮罩层效果

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

  6. JQuery 遮罩层弹窗

    var str = "<div id=\"zhezhao\" style=\"display:none; background-color: rgba(0 ...

  7. jquery 遮罩层指定位置

    .css .datagrid-mask-msg { position: absolute; top: %; margin-top: -20px; padding: 12px 5px 10px 30px ...

  8. Jquery实现遮罩层，就是弹出DIV周围都灰色不能操作

    <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC & ...

  9. jquery实现div遮罩层

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

随机推荐

  1. LOVE代码收集

    Love的截图函数 1 function love.load() love.filesystem.setIdentity("test") end function love.dra ...

  2. .NET开发必备工具之-Reflector

    第一步,下载 第二步,解压缩下载的包,双击Reflector应用程序打开 第三步,设置默认程序集,可以不设定 第四步,找到你要反编译dll文件 第五步,把dll文件拷贝到方便的位置(我在桌面上新建了T ...

  3. .NET 托管堆和垃圾回收

       托管堆基础 简述:每个程序都要使用这样或那样的资源,包括文件.内存缓冲区.屏幕空间.网络连接.....事实上,在面向对象的环境中,每个类型都代表可供程序使用的一种资源.要使用这些资源,必须为代表 ...

  4. .net中的多线程

    一.多线程的概念        什么是进程呢?当一个程序开始运行时,它就是一个进程,进程所指包括运行中的程序和程序所使用到的内存和系统资源.而一个进程又是由多个线程所组成的,线程是程序中的一个执行流, ...

  5. 从零开始学JAVA(05)－连接数据库MSSQL(JDBC代码篇)

    MSSQL的JDBC驱动下载好以后就可以写代码了. 1.新建项目,项目名为SqlJdbc.新建类,类名为SqlTest,同时勾选public static void main(String[] arg ...

  6. 控制反转（IoC）

          大量使用工厂模式引起的问题:       Client 对象需要使用 Service1 的 execute( ) 方法完成特定功能,而 Service1 的实现 Service1Impe类 ...

  7. 【JEMTER】后置处理器JSON Path Extractor获取server端返回的json中某项值

    需求1:点击所有报表模板时,server端返回所有报表模板的ID(templateId),测试时需要下载某个模板生成的报表 需求2:点击单个报表模板时,server端返回这个报表模板下的所有报表ID( ...

  8. unity与Android交互

    unity打包成安卓工程中的JAVA代码 public class UnityPlayerActivity extends Activity { //Unity中调用此函数 public int Ma ...

  9. log4net日志文件名输出格式化

    日志文件输出格式: 20130626.txt20130627.txt20130628.txt20130629.txt <appender name="rolling" typ ...

  10. 获得自动增长的MySQL主键

    下面的脚本教您如何获得自动增长的MySQL主键,如果您对MySQL主键方面感兴趣的话,不妨一看,相信对您学习MySQL主键方面会有所启迪. import java.sql.Connection; im ...