jquery 半透明遮罩效果小结

最近偏离学术的道路越来越远了！！

今天要小结的是实现一个半透明遮罩效果。点击页面上的一个按钮，立即在屏幕的正中央显示某个部件，并且在这个部件之外的区域像是蒙上了一层半透明的遮罩。点击遮罩区域，该正中央的部件消失，页面恢复成原来样子。

首先谈谈最简单的实现方式吧。准备两个div，一个是幕布<div class="bg"></div>，另一个是要显示在屏幕正中央的部件<div class="content"></div>，content 里面要显示什么东东，就由你自己去定义了。可以是图片，也可以是图表、视频什么的。然后就是添加效果，使得它有我们的效果。

1.既然点击了按钮，要遮住原网页，于是给这两个div设置显示优先级：z-index，把content的设成3，bg的设成2

2 既然要半透明，那就给bg这个遮罩上一个颜色吧：background:#000

3 一开始他们是隐藏的:display:none. 某事件触发后，才显示，这就要用jquery的语句了：$('.bg').fadeIn(200);$('.content').fadeIn(400);

好了，就差不多了，很简单吧，完整的代码如下：

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.bg{display:none;position:fixed;width:100%;height:100%;background:#000;z-index:2;top:0;left:0;opacity:0.7;}
.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>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"> </script>
<body>
<p><div class="click1" style="color:red">点击这里</div></p>
<div> 下面是网页的正文内容  blablabla </div>
<div class="bg"></div>
<div class="content">
<h1>欢迎新浪微博互粉！</h1>
http://www.weibo.com/leavingseason
<h1>相信音乐，相信五月天</h1>
</div><script type="text/javascript">
$(function(){$('.click1').click(function(){$('.bg').fadeIn(200);$('.content').fadeIn(400);
});$('.bg').click(function(){$('.bg').fadeOut(800);$('.content').fadeOut(800);
});
});
</script>
</body></html>

这种原生态的实现比较省事。还有一些插件可以提供类似的功能的。比如fancybox ： http://fancybox.net/

fancybox里面的demo比较好看，毕竟这是专业的嘛，大家感兴趣不妨浏览一下。接口也很简单，基本几分钟就学会了。

如果你想弹出来的是对话框，那么可以考虑试试jQuery UI: http://jqueryui.com/dialog/ . 这上面有好几种对话框的形式。

还有一些插件，比如pop easy， thick box啊等等。但是要用插件嘛，毕竟会有些麻烦。有些插件它是收费的，就给你这么几天的试用期；有些插件你也不好说它什么时候就不更新了，这对你的网页的兼容性会有影响。所以啦，最好还是用我的第一种推荐方式了。

转载于:https://www.cnblogs.com/sylvanas2012/p/3320360.html

jquery 半透明遮罩效果小结相关推荐

为图片添加半透明遮罩效果
平时为图片添加半透明遮罩效果,我的做法如下: 利用标签i实现背景半透明遮罩.当鼠标hover时, 提高i的背景色透明度值background-color: rgba(0, 0, 0, .6) < ...
QT 轻松实现半透明遮罩效果
一.背景有时候我们需要实现下面的半透明遮罩效果,以便突出子窗口. 二.实现原理 1.总共分为三层:主窗口(Form).遮罩.显示窗口. 2.主窗口的子窗口是遮罩,遮罩的子窗口是显示窗口. 3.遮罩设 ...
C#实现winform仿div+css半透明遮罩效果
本文实现在winform项目实现网页div+css关透明效果,挺帅的,在网页中要实现div的半透明遮罩层效果不难,在winform项目就不是这么容易了,下面我们来看下效果图先: 正常时: 文章来自 ...
半透明遮罩效果 DIV
1.用JS判断你的显示器分辨率: var iWidth = window.screen.availWidth; var iHeight = window.screen.availHeight; ,获取 ...
用div层来实现页面半透明遮罩效果
实现效果: 弹出一个窗口的时候,窗口后面的页面变暗,并且不能操作难点: 因为div 层是不能把select控件遮住的,所以要特殊处理,方法两种,一种是在弹出窗口下面加一层iframe来遮住selec ...
C#实现Winform自定义半透明遮罩层
在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Code using Sys ...
php 遮罩层,Jquery实现遮罩层的方法
本文实例讲述了Jquery实现遮罩层的方法.分享给大家供大家参考.具体如下: 1.假设#main为页面body中的最外层Div标签 2.背景被遮罩后,显示的弹出窗(默认是不显示的,所包含的CSS这里就 ...
[读码][js,css3]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果] 近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证. 读码就要读比较全面的,读像是原著的代码 ...
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...

jquery 半透明遮罩效果小结

jquery 半透明遮罩效果小结相关推荐

最新文章

热门文章

jquery 半透明遮罩效果 小结

jquery 半透明遮罩效果 小结相关推荐

最新文章

热门文章

jquery 半透明遮罩效果小结

jquery 半透明遮罩效果小结相关推荐