使用jQuery制作遮罩层弹出效果的极简实例分享


Posted in Javascript onMay 12, 2016

客户的网站上突然需要一个遮罩弹窗效果,也可以称作暗箱之类的,具体效果就是网页中背景变成半透明,然后在屏幕中间出现一个菜单之类的东西。这种效果在网上很常见,例如: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);
 });

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

Javascript 相关文章推荐
js 创建快捷方式的代码(fso)
Nov 19 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 Javascript
JS函数的定义与调用方法推荐
May 12 #Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 #Javascript
JS定义类的六种方式详解
May 12 #Javascript
值得分享和收藏的Bootstrap学习教程
May 12 #Javascript
jQuery中$.each()函数的用法引申实例
May 12 #Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 #Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 #Javascript
You might like
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
JSON JQUERY模板实现说明
2010/07/03 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
Python 列表理解及使用方法
2017/10/27 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
使用python实现kNN分类算法
2019/10/16 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
物业工作计划书
2014/01/10 职场文书
员工评语大全
2014/01/19 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
现场施工员岗位职责
2014/03/10 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
Python anaconda安装库命令详解
2021/10/16 Python