用 jQuery 制作一个简单的遮罩弹窗效果教程

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

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

其他的实现方法

现在的方法确实足够简单,但是兼容性不够好,对于早期的 IE 浏览器不兼容。通常的做法是这样的:用 Javascript 获取整个网页的高度、宽度,赋值给遮罩层,这样即使打开遮罩滚动网页,也不会出现没有遮罩的地方。具体的代码和实现方式,请看这篇文章:简单的jQuery弹出遮罩层

差不多就是这样吧,至于内容层的展示之类的,就靠你根据具体内容自由发挥了。

10个前端开发必备的工具或使用方法

工欲善其事必先利其器,有了本文介绍的工具和一些功能,你就可以高效的处理任务和信息。下面的这些工具都是本人平时经常用到的,如果你有更好的更有效率的工具,请告知一声,补充一下!

火狐浏览器

使用火狐浏览器

前端要看网页,浏览器是必备的,但为什么要选择火狐浏览器而不是谷歌、IE、opera、360?首先,IE就不要谈了,360那些国产的也不要提了,opera 国内使用率并不高。使用谷歌浏览器也是一个好的选择,但是我本人倾向于使用火狐。因为在之前的使用过程中,感觉 chrome 是拿来上网用的,而 Firefox 才是拿来开发用的,特别是下面介绍的一些功能插件都是基于火狐浏览器的。当然谷歌浏览器上面也有一套不错的开发工具。

Firebug

FireBug

这个插件具有非常强大的功能,它把网页的 HTML 结构进行了整理,查看和修改 CSS 也非常方便。这只是基础的功能,还有控制台等可以调试 JavaScript 等,是前端不可缺少的工具。具体使用方法不再赘述。

查看选中部分源代码

查看选中部分源代码

这是火狐浏览器中内置的一个功能,通过选取网页上的一快内容,然后右击查看选中部分源代码,可以快速查看到你选中部分的源代码内容。这样就可以非常快速的了解到某个区域的 HTML 结构,从而避免从海量文件中寻找对应代码。

Yslow

使用 Yslow

网站性能优化也是前端的一个重要任务,而雅虎出品的 Yslow 插件,就是进行网站性能测试的工具。使用它进行测试之后,会给出一个等级以及存在哪些问题以及如何进行修正。官方地址:点击这里

查看元素(三维视图)

查看元素 三维视图

火狐浏览器自带的查看源代码功能还是比较弱的,于是有 查看元素 这个功能。使用鼠标放在某个元素上,右击 查看元素 ,即可看到这个元素的 HTML 结构和对应的 CSS 样式,也可以很方便的修改。但是通常使用 FireBUG 来完成这个任务,因为自带的功能不是特别强。这里主要介绍的是 查看元素 功能中的 三维视图 功能。这个功能可以把你的网页变成三维视图,从而可以非常方便的查看到网站的结构是否合理、是否正确闭合、是否嵌套层数太多。

自适应设计视图

自适应设计视图

目前响应式设计越来越流行,这个功能就是来测试网页的响应式布局效果。同样也是火狐浏览器中内置的功能,在 菜单 中 Web开发者 选项中可以找到。虽然网上也有一些网页版的响应式测试工具,但是我个人觉得还是浏览器自带的比较方便实用,速度也比较快。此外,据说 chrome 上面也有类似的工具。

IE9

IE9

IE9 是用来做兼容性测试用的。如何做 IE 兼容性测试呢?IE9 已经像 firefox chrome 一样,内置了非常简陋、难用的页面调试功能,但是其中有一个非常重要的功能,就是设置浏览器和文档解析模式。它可以方便的切换到 IE7 、IE8 文档渲染模式,此外还有怪异模式等等。这样,用IE9就可以同时做IE7和IE8的兼容性测试。对了,IE6呢,IE6怎么办。原来你还在费力的做IE6的兼容?

有道云笔记

有道云笔记

前端也是需要不断学习的,包括一些总结或者网上的资料。以及一些优秀作品的网页截图、图片资源等等,都是需要分类整理的。面多这么多的信息,你如果用文件夹和 Word文档或者浏览器的收藏夹来整理,那简直是弱爆了。有道云笔记是我用过最好的比较,容量大,使用方便。可以直接使用网易邮箱登陆开通,如果你还没有账号,可以通过我的邀请链接注册。

火狐剪报

火狐剪报

快速对当前网页进行截图,并且可以进行简单编辑。搭配有道云笔记,可以记录优秀的设计,提供一些灵感。此外有很多类似的网页截图工具。

notepad++

NotePad ++

非常小巧好用的文本编辑器。用来快速高效的搜索修改代码。如果你想修改一点小代码的时候,却要忍受几秒的编辑软件启动时间,那么就用这个吧。无论是写代码还是修改代码,个人觉得都比那些功能齐全的编辑软件好很多。当然文本编辑器也有很多,但是用了一遍我个人觉得这是最好的。

DD_belatedPNG 与 unitpngfix 两种解决IE6中PNG文件透明问题方案横向对比

虽然 IE6 骂声不断,但是仍然还有不少的市场份额。而在网页中,png 文件体积小、无锯齿、透明度好而被广泛使用。当这两件事情碰在一起,问题就来了,IE6 不支持 png 的透明,它会把透明的部分显示成白色的。

有问题就会有解决方法,可以使用早期IE6支持的滤镜来实现透明效果,有些牛人就根据这个原理进行了封装,做成了 JS 来使用。所以,我们只需要调用他们编写 JS 文件即可。在网上有众多解决这种问题的方法和插件,但是实际上目前有这两种方式比较有效,那就是DD_belatedPNG.js 和 unitpngfix.js 这两种方法。本文就是简单介绍一下使用方法和特点,然后将其进行一个对比。

DD_belatedPNG.js 方法

DD_belatedPNG.js 这个插件功能非常强大,强大的背后就是复杂的使用方法和体积大小。首先要下载这个 JS 文件,然后引用到页面中,之后就要为其填写配置一些参数。通常要用两个参数,一个是 CSS 选择器,使用这个选择需要处理的层或者图片,另一个是类型,就是这个图片是作为 img 图片还是 background 背景图片来使用的。插件体积的话,压缩版也有7KB。

知更鸟已经写了一篇比较简单的使用方法:使用DD_belatedPNG让IE6支持PNG透明图片

官方的英文版提供了更加详细的教程:点击这里

unitpngfix.js 方法

unitpngfix.js 这个插件使用起来非常简单,不需要配置什么参数,只需要引入JS插件即可。而且非常小巧,只有2KB,不需要进行任何配置。但是要注意,JS 文件里面还要配置一个小图片地址,这个图片就是一个1像素的透明图片,是这个插件必须的素材。所以你需要上传或者在网上找个,然后填写进去。

更加详细的使用方法请看官方页面:点击这里

上面介绍两种方法的两种方法的使用方法,下面我们从实际应用来对比一下。

实践对比测试

介绍的再怎么好,也要通过实践检验。下面就来动手做个 Demo 亲自测试一下使用过程和效果。Demo 页面非常简单,就是一个带有透明 png 背景图片的 div ,并且把背景图片放在了右下角,关键代码:

div{width:400px;height:400px;margin:20px;background:url(222.png) bottom right no-repeat;border:1px solid #000;}

打开之后的效果是正常的

png 正常效果

现在我们启动伟大的经常无条件崩溃的 ieTest ,使用 IE6 来加载这个页面

IE6 下 png 文件的出错效果

成功的显示出了白色的背景,哦也!

使用 DD_belatedPNG.js 方法:先引用 JS 文件,然后设置上属性和参数。具体代码如下:

<!–[if IE 6]>
<script src=”DD_belatedPNG_0.0.8a-min.js”></script>
<script>
DD_belatedPNG.fix(‘div,background’);
</script>
<![endif]–>

DD_belatedPNG 在 IE6 下修正效果

刷新之后,成功修正!

使用 unitpngfix.js 方法:上传并且设置好小图片,然后引用 JS 文件。具体代码如下:

<script src=”unitpngfix.js”></script>

Unitpngfix 在 IE6 下的修正效果

但是刷新之后,背景图片却出不来了。当然这个与 IEtest 的不稳定也有关,在原生IE6下测试应该不会出现这种情况(未测试),在之前的实际使用中,偶尔会出现这种情况。大部分时候,作为背景图片会跑到左上方,因为 unitpngfix 对 background 的属性支持不太好(官方有提到)。

用户体验对比

DD_belatedPNG.js 的使用效果比较好,达到了要求,但是使用起来比较繁琐,需要针对性的对要使用的图片添加参数,这样就不便于后期的修改。当然,可以新建一个专用的类,为所有需要处理的图片,添加这个类即可,总体上也是比较方便的。此外体积也稍大。

unitpngfix.js 使用起来非常简单,只需要引入这个文件,就可以对页面中所有的 png 图片进行处理。但是对于原图片的 background 属性支持不太好。尤其对 background-position、background-repeat 等属性,容易失效。而且有时不太稳定(未在原生IE6下测试)。体积较小。

从效果出发,自然是选择 DD_belatedPNG.js ,但 unitpngfix.js 也是有价值的。如果要你为一个包含很多 png 图片的页面做兼容处理,你是选择使用 DD_belatedPNG.js ,为图片一一添加属性或者把选择器一一填上,还是直接引用一个 unitpngfix.js ,忍受一点效果的缺失?

近期的写作计划和学习方向

转眼又有很长时间没有写文章了,也没有什么进步。手头上有一些任务,太久都没有完成,再加上假期太久,内心有点空虚,精力和注意力也跟不上了。现在要重新振作一下,去做一些之前定下的计划。

我不得不接受我是一个色弱的事实,此外我的审美观也和大众不同,所以我虽然喜欢设计,但想要从事视觉设计,并不占有什么优势。当初选择这个方向,现在看来可能是个失误,也就意味着前段时间的学习,实际价值并不算高。但是我确实喜欢设计,所以选择与设计相关,但是与视觉设计关系不大的交互设计。

交互设计主要是指一些人机操作交互,例如点击一个按钮,会怎么处理?是弹出一个对话框?还是使用遮罩效果出来一个菜单?怎么出来?这个设计,主要指流程和产品的功能设计,同时带有淡淡的外表,例如线框、原型等等。同时包含一些心理学方面的知识,也是我比较感兴趣的。

此外,我放弃了网站建设、运营相关的内容,其实运营或者建设非常简单,根本没有什么好研究的,只要你的网站是以用户为主,注重用户体验,并且能够提供高质量的服务,自然而然的就变成了名站,有固定的用户。而这些运营方面的文章,绝大多数,要么是泛泛而谈一些大家都知道的常识,要么就是投机取巧(特别是SEO),没有什么意思。

主要的方向仍然是前端相关的,现在对 JavaScript 比较感兴趣,之后要着重学习这门语言,此外就是一些新技术,HTML5 CSS3之类的。对 jQuery 也十分有好感,以后要深入学习,做一些插件之类的。但目前的话,主要以翻译学习使用现有的插件,打造比较好的效果为主。

至于之前的 WordPress 主题制作系列教程的中级篇的写作计划,打算跟初级篇的写作步骤一致,整体以一个成熟的功能齐全的主题制作为主线,从一开始到结束。目前已经酝酿出一个新主题的设计风格,但是制作这套主题需要时间和经历。所以我打算先制作出这套比较完善的主题之后,再继续写出中级篇的教程。

至于近期的计划,打算认真的学习一下视差滚动网页的设计和实现方法,毕竟这种用户体验是前所未有的爽,随着 CSS3 的发展,这个肯定会流行起来。近期将会写比较多的文章介绍相关的插件和实现方法。

还想说一下设计,视觉设计也不是不可以,只是做不出颜色复杂、乱七八糟的设计,我是一个崇尚简洁的人,我喜欢简洁的设计,既简单、又实用。

本站原创主题 Qetro 现对外公开发布

早在去年的8月份,本人就开始制作这套主题,期间收集了不少网友提供的建议。今年二月份以来,经过近一周的工作,对大部分代码进行了重写,推出了公开版本。

早在去年10月份的 1.2 版本,就打算对外公开,但是由于当时的水平有限,所以一直没有怎么处理主题,让很多网友久等了!!没有这些网友的敦促,相信也不会有公开版本。

这套主题功能和结构都比较简单,比较适合初学者研究、折腾、二次改造使用,在今后的升级,将会不断的增加新的功能,如果你有什么建议和功能需求,请邮:qianxingzhem#126.com(#换@)

关于主题更详细的介绍和下载地址,请看这里:Theme Qetro

同时,祝大家新年快乐,万事如意!!