使用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 相关文章推荐
JavaScript入门教程(7) History历史对象
Jan 31 Javascript
javascript 面向对象编程基础:封装
Aug 21 Javascript
jQuery 技巧小结
Apr 02 Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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中文乱码
2009/11/26 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
Python sys.path详细介绍
2013/10/17 Python
Python函数嵌套实例
2014/09/23 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
python中join()方法介绍
2018/10/11 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
Django密码系统实现过程详解
2019/07/19 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
中科软笔试题和面试题
2014/10/07 面试题
甜品店创业计划书
2014/09/21 职场文书
五一劳动节活动总结
2015/02/09 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL