使用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 打地鼠游戏代码说明
Oct 12 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
JavaScript创建表格的方法
Apr 13 Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 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
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
Js 中debug方式
2010/02/07 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
python实现简单http服务器功能
2018/09/17 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
python日志logging模块使用方法分析
2019/05/23 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
python logging 日志的级别调整方式
2020/02/21 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
公司企业表扬信
2014/01/11 职场文书
国际会议邀请函范文
2014/01/16 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
学习十八大演讲稿
2014/09/15 职场文书
推普标语口号大全
2015/12/26 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
Python中的变量与常量
2021/11/11 Python