jquery 半透明遮罩效果示例__jquery_content_fadeIn_background_fancybox_

当前位置: 编程技术>jquery

jquery 半透明遮罩效果示例

来源: 互联网发布时间：2014-10-07

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

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

实现方式：
准备两个div，一个是幕布

，另一个是要显示在屏幕正中央的部件

，content 里面要显示什么东东，就由你自己去定义了。可以是图片，也可以是图表、视频什么的。然后就是添加效果，使得它有我们的效果。

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

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

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

完整代码：

代码示例:

.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;}

点击这里

下面是网页的正文内容 blablabla

欢迎新浪微博互粉！
http://www.weibo.com/leavingseason
相信音乐，相信五月天

$(function(){

    $('.click1').click(function(){
        $('.bg').fadeIn(200);
        $('.content').fadeIn(400);
});

$('.bg').click(function(){
$('.bg').fadeOut(800);
$('.content').fadeOut(800);
});
});

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

fancybox里面的demo比较好看，接口也很简单，基本几分钟就学会了。

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

还有一些插件，比如pop easy， thick box等，大家根据自己的情况选择使用吧。

您可能感兴趣的文章：