遮罩层的好处就是可以屏蔽用户对遮罩层下方元素的操作。

制作原理很简单：1设置遮罩层触发按钮 2设置遮罩层内容 3设置遮罩层背景（重点是捕获内容div的大小位置）4设置点击触发按钮遮罩层背景内容同时显示或隐藏。

具体代码如下：

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

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <script type="text/javascript" src="scripts/jquery.js"></script>

     <title>demo</title>

     <style type="text/css">

         body{

             font: 12px Verdana, Arial, Helvetica, sans-serif;

         }

         .mask {

             position: absolute;

             top: 0px;

             filter: alpha(opacity=);

             background-color: #B2B2B2;

             z-index: ;

             left: 0px;

             opacity:0.5;

             -moz-opacity:0.5;

         }

         .content{

             display:none;

             padding:25px 20px;

             width:600px;

             border:1px solid #b2b2b2;

             background:#fff;

             z-index:;

             position:fixed;

             left:%;

             top:%;

         }

         .content h3,.content p{

             padding:10px;

             background:#;

             color:#fff;

         }

         #close{

             cursor:pointer;

             font-size:20px;

             color:#;

             position:absolute;

             top:5px;

             right:20px;

         }

         #open1{

             width:90px;

             color:#;

             cursor:pointer;

             padding:10px;

             background:#;

             color:#fff;

         }

     </style>

     <script type="text/javascript">

         $(function(){

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

                 $("#mask").css({

                     "height":$(document).height(),

                     "width":$(document).width()

                 }).show();

             })

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

                 $(".content").show();

             })

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

                 $(".content").hide();

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

             })

         })

     </script>

 </head>

 <body>

 <div id="mask" class="mask"></div>

 <div id="open1">点击显示遮罩层</div>

 <ul>

     <li>网页内容</li>

     <li>网页内容</li>

     <li>网页内容</li>

     <li>网页内容</li>

     <li>网页内容</li>

     <li>网页内容</li>

     <li>网页内容</li>

     <li>网页内容</li>

     <li>网页内容</li>

     <li>网页内容</li>

     <li>网页内容</li>

 </ul>

 <div class="content">

     <h3>遮罩层内容</h3>

     <p>遮罩层的好处就是可以屏蔽用户对遮罩层下方元素的操作。

         <br>

         制作原理很简单：1设置遮罩层触发按钮 2设置遮罩层内容 3设置遮罩层背景（重点是捕获内容div的大小位置）4设置点击触发按钮遮罩层背景内容同时显示或隐藏。

     </p>

     <span id="close">x</span>

 </div>

 </body>

 </html>

效果图：

更好的方法呢，我们可以利用jQuery插件--thickbox来构造遮罩层效果。

下载后引人相应的jQuery和css文件

<script src="scripts/jquery.thickbox.js" type="text/javascript"/>

<link rel="stylesheet" href="styles/thickbox.css" type="text/css"/>

然后为需要应用该效果的超链接元素添加class="thickbox"和title属性，它的href
值代表着需要弹出的图片，代表如下：

<a id="thickImg" href="images/pro_img/blue_one_big.jpg" class="thickbox" title="介绍文字">

<img src="data:images/look.gif" alt="点击查看大图"/>

</a>

在jQuery环境下制作轻巧遮罩层的更多相关文章

  1. 基于jQuery向下弹出遮罩图片相册

    今天给大家分享一款基于jQuery向下弹出遮罩图片相册.单击相册图片时,一个遮罩层从上到下动画出现.然后弹出显示图片.这款插件适用浏览器:IE8.360.FireFox.Chrome.Safari.O ...

  2. Windows环境下制作Ubuntu的U盘启动工具

    Windows用户想要尝试一下Ubuntu或其他Linux系统?最简单的方法就是使用VMware Workstation,只是虚拟机会真实占用内存,如果你的电脑内存8G及以上可以试试.内存偏小,或者觉 ...

  3. jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...

  4. 谷歌下解决Pop遮罩层无法遮挡滚动栏下问题

    今天用pop的弹出窗体里,出现一个问题,当网页出现滚动栏里,不能遮挡住,解决Pop遮罩层无法遮挡滚动栏下问题. 可通过下载获取改动后的代码----->进入下载

  5. Windows环境下制作MACOS X U盘安装盘

    前两天在朋友的MAC BOOK AIR上胡乱操作时把原来安装好的双系统搞坏了,一不小心又把硬盘格式化了,导致MAC系统也没了,于是只能重新安装MACOS系统,并根据网友提供的教程,在MACOS安装OK ...

  6. windows和linux环境下制作U盘启动盘

    新笔记本上,要装xp的系统,100%会破坏原有的Linux系统,因为安装xp的时候会自动覆盖硬盘的主引导扇区,这个扇区一旦被重写,那么原有的linux根本就启动不了. 要想玩linux和xp双系统,一 ...

  7. Android环境下通过C框架层控制WIFI【转】

    本文转载自:https://blog.csdn.net/edw200/article/details/52192631 本人是从事Linux嵌入式开发的,安卓wifi控制在安卓JAVA层已经做得非常成 ...

  8. Mac环境下制作ubantu安装盘

    前言:ubantu为Linux发行版之一,此方法亦可制作其他Linux发行版 1.在磁盘工具中将准备好的u盘格式化为Mac OS扩展(日志型),并确保分区的模式是GUID分区 2.官网自行下载uban ...

  9. jQuery点击图片弹出大图遮罩层

    使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产 ...

随机推荐

  1. hbase 学习笔记一---基本概念

          说在前面,本文部分内容来源于社区官网经过适度翻译,部分根据经验总结,部分是抄袭网络博文,(不一一列举引用,在此致歉)一并列在一起,本文的目的,希望能总结出一些有用的,应该注意到的东西,基本 ...

  2. C#中托管与非托管

    在.net 编程环境中,系统的资源分为托管资源和非托管资源. 对于托管的资源的回收工作,是不需要人工干预回收的,而且你也无法干预他们的回收,所能够做的 只是了解.net CLR如何做这些操作.也就是说 ...

  3. TypeScript 素描 - 模块

    /* 其实前面一些都是废话,因为都和C#类似.从模块开始就需要深入的去理解了 文档反复声明了 内部模块现在称做 命令空间 外部模块称为 模块 模块在其自身的作用域里执行,而不是在全局作用域里,也就是说 ...

  4. JdbcTemplate增删改查

    1.使用JdbcTemplate的execute()方法执行SQL语句 jdbcTemplate.execute("CREATE TABLE USER (user_id integer, n ...

  5. SQL拆分多规则的字符串分离数字。

    --拆分多规则字符串 DECLARE @Codes NVARCHAR(MAX) SET @Codes = '6*BC-007,*BC-016,9*BC-015' --对于*BC-015这种情况,则Qt ...

  6. 【Android 应用开发】Android 开发环境下载地址 -- 百度网盘 adt-bundle android-studio sdk adt 下载

    19af543b068bdb7f27787c2bc69aba7f Additional Download (32-, 64-bit) Package r10 STL debug info androi ...

  7. Thread+Handler 线程 消息循环(转载)

    近来找了一些关于android线程间通信的资料,整理学习了一下,并制作了一个简单的例子. andriod提供了 Handler 和 Looper 来满足线程间的通信.例如一个子线程从网络上下载了一副图 ...

  8. mahout算法源码分析之Itembased Collaborative Filtering（三）RowSimilarityJob验证

    Mahout版本:0.7,hadoop版本:1.0.4,jdk:1.7.0_25 64bit. 本篇分析上篇的分析是否正确,主要是编写上篇输出文件的读取以及添加log信息打印相关变量. 首先,编写下面 ...

  9. hdu1051 Wooden Sticks

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1051 大意:求最少升序序列的个数. #include <cstdio> #include &l ...

  10. Redis HyperLogLog

      Redis 在 2.8.9 版本添加了 HyperLogLog 结构. Redis HyperLogLog 是用来做基数统计的算法,HyperLogLog 的优点是,在输入元素的数量或者体积非常非 ...