jquery 半透明遮罩效果示例

发布时间:2020-10-30编辑:脚本学堂
本文介绍了jquery实现半透明遮罩效果的一例子,有需要的朋友参考下。

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等,大家根据自己的情况选择使用吧。