jQuery 教程:简单的遮罩弹窗效果
2013-09-25 14:00
267 查看
遮罩弹出效果就是网页中背景变成半透明,然后在屏幕中间出现一个菜单之类的东西。这种效果在网上很常见,例如:QQ空间浏览相册等。这种效果的好处就是,可以让用户聚焦到弹出的菜单中。
神说,有代码的文章,应该有个 Demo ,于是就有了 Demo。
首先先来分析一下这个过程:触发某个事件(例如点击按钮),然后出现一个背景遮罩上面还有一个内容层。触发的按钮,我在这里用 div 来代替,并且使用 click 点击事件来演示。那么我们的 HTML 结构就很明确了。
对于遮罩效果的 CSS 代码是最关键的。遮罩用到了两个 div ,一个作为背景,要覆盖整个网页,另一个是内容显示层,通常要居中处理。
简单解释一下,首先要隐藏起来,之后用 jQuery 触发显示。之后指定 position 的属性为 fixed,因为这样,才能激活 top 、left 、bottom 、right 、z-index这些属性,同时可以设置 width 、height 为 100% 来实现覆盖整个网页。通常情况下,一般用 absolute 属性值来实现这种效果,因为它的兼容性更好。但是在实际应用当中,当页面很长,往下滚动的时候,使用 absolute 遮罩层也会跟随滚动。对于内容层来说,比较简单,指定宽度和高度用负边距来使其居中显示。
特别要注意一点,背景层的半透明使用的是 opacity 属性,因为使用这个属性可以更好的用 jQuery 来控制。但是 fixed 、opacity 都是早期 IE 浏览器不支持的。
分析一下遮罩的交互操作,无非就是点击弹出,然后点击一下遮罩,消失。那么就直接对 CSS 进行操作即可。
这里直接使用 CSS 方法,当点击的时候改变 display 属性,此外还有很多实现方法,不再赘述。完成这些,当我们点击“点击这里”之后,就可以看到效果了。
点击之后,突然出现并不是一个好方法。所以我又增加了一个按钮,点击之后通过 fadeIn、fadeOut 方法来控制渐隐。
这样简单的方法,就增强了用户体验。当然,还有一些更高级的效果可以实现。
现在的方法确实足够简单,但是兼容性不够好,对于早期的 IE 浏览器不兼容。通常的做法是这样的:用 Javascript 获取整个网页的高度、宽度,赋值给遮罩层,这样即使打开遮罩滚动网页,也不会出现没有遮罩的地方。具体的代码和实现方式,请看这篇文章:简单的jQuery弹出遮罩层。
差不多就是这样吧,至于内容层的展示之类的,就靠你根据具体内容自由发挥了。
神说,有代码的文章,应该有个 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弹出遮罩层。差不多就是这样吧,至于内容层的展示之类的,就靠你根据具体内容自由发挥了。
相关文章推荐
- jquerymobile的使用
- jquery mobile 插件
- jqGrid使用方法
- jquery 查询元素技巧
- jquery身份证验证
- myeclipse9 jquery 报错
- Jquery mobile 学习笔记
- jquery中load一个页面js失效问题
- jquery_easyui中文教程
- 基于jquery右侧浮动QQ客服
- 基于jQuery信息提示弹出层插件
- 基于jQuery图像缩放工具插件Zoomer
- jquery一款鼠标移上显示大图的控件
- jquery一款多种颜色的单选某元素的控件
- jQuery实现鼠标滑过图片时会缩小并动态显示信息的幻灯效果
- JS和JQuery问题
- jquery实现的向上无缝循环滚动的新闻效果
- jQuery实现漂亮的指定区域内鼠标右键关联菜单可自定义图标
- jquery实现的非常简单实用带有渐变切换效果的tab选项卡
- jquery实现百度应用游戏排行图文切换特效