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

制作原理很简单: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. [iOS基础控件 - 6.9.2] 静态单元格 QQ功能列表

    使用storyboard设计静态的表格数据   A.实现步骤 1.控制器继承UITableViewController 2.在storyboard中使用TableViewController,删除原来 ...

  2. linux(centos 6)下记录所有用户的操作以及ip、时间

    编辑/etc/profile文件,在文件末尾加入下面代码: [root@iZ23nn1p4mjZ root]# vi /etc/profile history USER=`whoami` USER_I ...

  3. SCOI2016滚粗记

    day0 又到了SCOI,照惯例赛前参加省选培训,住酒店但学校食堂很难吃. 省选培训被成七和南山的大爷虐翻,感觉进省队没什么戏,权当玩一玩吧. day1 早上醒的时候感觉脑袋很痛,想睡又睡不着,第二天 ...

  4. java.lang.OutOfMemory总结分析

    OOM浅析 相信有一定java开发经验的人或多或少都会遇到OutOfMemoryError的问题,这个问题曾困扰了我很长时间,随着解决各类问题经验的积累以及对问题根源的探索,终于有了一个比较深入的认识 ...

  5. 推荐十款非常优秀的 HTML5 在线设计工具

    网络有很多优秀的设计和开发工具可能大家都不知道,因此这篇文章就向设计师推荐十款优秀 HTML5 在线工具,这些工具能够帮助设计师们设计出更有创意的作品.随着 HTML5 技术的不断成熟,网络上涌现出越 ...

  6. plsql developer导入导出数据库方法

    导出步骤: 1 tools ->export user object 选择选项,导出.sql文件 2 tools ->export tables-> Oracle Export 选择 ...

  7. python的random模块

    As an example of subclassing, the random module provides the WichmannHill class that implements an a ...

  8. C语言用static限制函数以及全局变量的作用域

    今天才发现这个东西! C语言中没有public private之类的东西. 如果一个函数或者一个全局变量只想在一个.c文件中使用,可以在前面加上static! 以前我还傻傻的每个.c文件中的函数都加一 ...

  9. 解决MySQL不允许从远程访问的方法

    mysql -u root -p mysql>use mysql; mysql>select 'host' from user where user='root'; mysql>up ...

  10. ViewGroup源码部分解析

    ViewGroup的官方解析是: A <code>ViewGroup</code> is a special view that can contain other views ...