使用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 相关文章推荐
列表内容的选择
Jun 30 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
浅谈js闭包理解
Mar 28 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
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
Terran剧情介绍
2020/03/14 星际争霸
php mysql索引问题
2008/06/07 PHP
PHP Ajax中文乱码问题解决方法
2009/02/27 PHP
php UTF8 文件的签名问题
2009/10/30 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
IE 下的只读 innerHTML
2009/08/21 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
python并发编程之线程实例解析
2017/12/27 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
python 处理string到hex脚本的方法
2018/10/26 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
中学实习教师自我鉴定
2013/12/12 职场文书
小学后勤管理制度
2014/01/14 职场文书
秦兵马俑教学反思
2014/02/07 职场文书
语文教学随笔感言
2014/02/18 职场文书
社会学专业求职信
2014/02/24 职场文书
排查整治工作方案
2014/06/09 职场文书
升国旗演讲稿
2014/09/05 职场文书
python入门之算法学习
2021/04/22 Python