jQuery 教程:简单的遮罩弹窗效果

标签: 开源程序 JavaScript jQuery | 发表时间:2013-03-05 22:24 | 作者:潜行者m
出处:http://blog.wpjam.com

遮罩弹出效果就是网页中背景变成半透明,然后在屏幕中间出现一个菜单之类的东西。这种效果在网上很常见,例如:QQ空间浏览相册等。这种效果的好处就是,可以让用户聚焦到弹出的菜单中。

神说,有代码的文章,应该有个 Demo ,于是就有了 Demo

HTML 结构

首先先来分析一下这个过程:触发某个事件(例如点击按钮),然后出现一个背景遮罩上面还有一个内容层。触发的按钮,我在这里用 div 来代替,并且使用 click 点击事件来演示。那么我们的 HTML 结构就很明确了。

  
<div class="click">点击这里</div>
<div class="click1">效果增强版的</div>
<div class="bg"></div>
<div class="content">这里是正文内容</div>

CSS 代码

对于遮罩效果的 CSS 代码是最关键的。遮罩用到了两个 div ,一个作为背景,要覆盖整个网页,另一个是内容显示层,通常要居中处理。

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

简单解释一下,首先要隐藏起来,之后用 jQuery 触发显示。之后指定 position 的属性为 fixed,因为这样,才能激活 top 、left 、bottom 、right 、z-index这些属性,同时可以设置 width 、height 为 100% 来实现覆盖整个网页。通常情况下,一般用 absolute 属性值来实现这种效果,因为它的兼容性更好。但是在实际应用当中,当页面很长,往下滚动的时候,使用 absolute 遮罩层也会跟随滚动。对于内容层来说,比较简单,指定宽度和高度用负边距来使其居中显示。

特别要注意一点,背景层的半透明使用的是 opacity 属性,因为使用这个属性可以更好的用 jQuery 来控制。但是 fixed 、opacity 都是早期 IE 浏览器不支持的。

jQuery 代码

分析一下遮罩的交互操作,无非就是点击弹出,然后点击一下遮罩,消失。那么就直接对 CSS 进行操作即可。

  
$(function(){
    $('.click').click(function(){
        $('.bg').css({'display':'block'});
        $('.content').css({'display':'block'});
    });
    $('.bg').click(function(){
        $('.bg').css({'display':'none'});
        $('.content').css({'display':'none'});
    });
});

这里直接使用 CSS 方法,当点击的时候改变 display 属性,此外还有很多实现方法,不再赘述。完成这些,当我们点击“点击这里”之后,就可以看到效果了。

更多技巧和方法

更平缓的显示

点击之后,突然出现并不是一个好方法。所以我又增加了一个按钮,点击之后通过 fadeIn、fadeOut 方法来控制渐隐。

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

这样简单的方法,就增强了用户体验。当然,还有一些更高级的效果可以实现。

其他的实现方法

现在的方法确实足够简单,但是兼容性不够好,对于早期的 IE 浏览器不兼容。通常的做法是这样的:用 Javascript 获取整个网页的高度、宽度,赋值给遮罩层,这样即使打开遮罩滚动网页,也不会出现没有遮罩的地方。具体的代码和实现方式,请看这篇文章: 简单的jQuery弹出遮罩层

差不多就是这样吧,至于内容层的展示之类的,就靠你根据具体内容自由发挥了。

>>>继续阅读 jQuery 教程:简单的遮罩弹窗效果的全文 ...


© 我爱水煮鱼 / 0条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

相关 [jquery 遮罩 效果] 推荐:

jQuery 教程:简单的遮罩弹窗效果

- - 我爱水煮鱼
遮罩弹出效果就是网页中背景变成半透明,然后在屏幕中间出现一个菜单之类的东西. 这种效果在网上很常见,例如:QQ空间浏览相册等. 这种效果的好处就是,可以让用户聚焦到弹出的菜单中. 神说,有代码的文章,应该有个 Demo ,于是就有了 Demo. 首先先来分析一下这个过程:触发某个事件(例如点击按钮),然后出现一个背景遮罩上面还有一个内容层.

Jquery easyui 下loaing效果

- - CSDN博客推荐文章
beforeSend:ajaxLoading,\\发送请求前打开进度条. ajaxLoadEnd();\\任务执行成功,关闭进度条. 作者:songhfu 发表于2013-8-10 17:24:30 原文链接. 阅读:15 评论:0 查看评论.

小tip:CSS3下的圆形遮罩效果实现与应用

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2118. 您可以狠狠地点击这里: CSS3下的圆形遮罩效果demo. 因为是使用纯洁的CSS3实现,因此,IE6~8浏览器又一次光荣获得“打酱油”的称号. 鼠标经过年轻的张含韵小姐身体的任一部位,然后——.

20篇教你得到酷炫效果的JQuery教程

- 正宗 - 帕兰映像
我们都喜爱jquery带来的梦幻效果. 本之列举的教程标题不同,但它们都带有不同的酷炫视觉效果. 跟着它们逐步重建你的设计,又或是将这些令人震憾的特效融入你的设计中. 想打造一个让人过目不忘的专属网络文件夹?这个特效是不错的示例. 流行的相片墙加上简洁的特效,没有啰嗦的文字堆砌,立刻抓住用户的注意力.

20 个 jQuery 超酷视觉效果构建教程推荐

- qqinxl - ITeye资讯频道
作为web开发程序员来说,我们都非常喜欢jQuery构造的超酷视觉效果. 本文中我们将精选一组jQuery效果教程. 大家将从这些教程中学习如何开发超级酷的视觉效果特效. 根据这些教程,大家可以一步一步构建自己的视觉特效. 创建一个基于HTML5的代表作选辑. 这篇教程中,将会介绍如何使用HTML5和jQuery来创建自己超酷的个人代表作选集.

帮助你生成翻页效果的jQuery插件 – bookblock

- - 前端观察
今天我们介绍一个漂亮的jQuery翻页效果插件 – bookblock,使用它可以创建动态的类似书本翻页效果的幻灯. 这个插件依赖于 jQuery++,这个类库是一个jQuery的扩展类库,这里使用了它的swipe事件. 主要html代码如下,生成需要展示的图片内容:. 希望大家喜欢这个插件,如果你有任何问题,请给我们留言,谢谢.

JQuery EasyUi之界面设计——前言与界面效果(一)

- - 博客园_首页
如果冯巩的开场白是“观众朋友们,我想死你们了”,那么我的开场白是“最近一直很忙,很久没有发文了”. 前面说过了EXT.NET,这里顺便再说说JQuery EasyUI. 为啥我会选择JQuery EasyUI呢. 基本的组件都用,即“麻雀虽小五脏俱全”. 使用简洁方便,比如支持html+js. 世上没有完美的产品,而且其对IE6的兼容性还存在一些问题,但相比extjs,其还是很方便阅读和修改的.

简单的jQuery翻牌效果导航菜单

- - 可咔酷 | 网络杂货铺
前几天,有人在Q问那种翻牌效果的广告怎么实现,抽空整了个简单的jQuery翻牌效果的导航菜单,其实说简单也不是很简单,重要的是想好整个过程的思路就好下手了,不整demo了,直接贴代码. 简单的jQuery翻牌效果导航菜单. 预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了.

使用 jQuery Easing Plugin 增强动画过渡效果

- - 我爱水煮鱼
jQuery 提供了一些诸如 show, hide, slideUp, fadeIn 等动画方法,可以方便的切换元素的显隐. 更有强大的自定义动画方法 animate ,可以实现很多动画效果. 为了让动画有好的过渡变化过程,官方为这些方法设置 easing 属性,但是官方没有给出很多过渡效果. jquery.easing.js 这个 jQuery 插件增加了很多过渡效果,引入之后可以让动画过渡过程更加多样化.

jQuery 图片放大镜效果插件:jQZoom

- - 我爱水煮鱼
在一些产品演示网站,常常需要这样的效果,把鼠标移到小图的上面,旁边出现这这部分的放大效果,通过这种方式让用户能够详细了解产品的细节. jQZoom 就是这样的一个 jQuery 插件,它能够让你网站的图片实现放大镜效果,把鼠标移到小图上,旁边出现大图的局部放大的部分,如下演示:. RSS 用户需要返回页面才能看到效果.