jquery 半透明遮罩效果

来源：互联网发布：ubuntu 14.04硬盘分区编辑：程序博客网时间：2024/05/24 01:40

首先谈谈最简单的实现方式吧。准备两个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啊等等。但是要用插件嘛，毕竟会有些麻烦。有些插件它是收费的，就给你这么几天的试用期；有些插件你也不好说它什么时候就不更新了，这对你的网页的兼容性会有影响。所以啦，最好还是用我的第一种推荐方式了。

0 0