前面曾在文章《淘宝Widget规范文档》中大致的提到过“淘宝Widget库”是干嘛用的，今天抽空整理了下知识点，下面给小伙伴们讲解下淘宝Widget库中弹出层的使用方法。(文章有点小长，听后如若有不良反应，请猛吐槽于下面的评论区中~)

在开讲之前首先要思考几个问题：
1.弹出层效果是什么样的？
2.弹出层的原理是什么？
3.弹出层的代码怎么写？
4.在淘宝中，用弹出层可以做哪些特殊效果？

1.弹出层效果是这样的

类似百度等大网站中的登录弹出框效果，图片网站中的图片展示效果等。如图一：　

2.弹出层原理

预先设置一个隐藏的弹出层，并且设置该弹出层的触点，通过鼠标滑入和移出触点来展示和隐藏弹出层效果。

3.弹出层代码

如图二：这个是淘宝官方给出的调用方法，(不要再问我为什么不能自己写的问题了，前面文档中有答案。)对于这个代码，需要花费点篇幅来写了，主要是为后面的一些特效打下基础！

通常情况下，我们在调用弹出层组件时，只需修改上图中数字部位，而数字“③”是修改最多的。为什么这样说呢？因为这里可以组合成81个节点。什么？81个？！明明只有2个，你在逗我么？！

下面来仔细的讲解下这81个节点是怎么计算出来的以及在日常使用中如何快速进行定位。

“81”个节点

上图中我们清楚的明白了弹出层需要一个“触发元素”和一个事先隐藏好的“弹出元素”。那么问题来了，两个元素间如何进行位置对齐呢？淘宝官方给出了9个节点，如图三：　这样的话触点层中的每一个节点都可以与弹出层中的每一个节点进行匹配，也就是9*9=81种了。那么，不同的节点匹配后的效果究竟是怎么样的呢？下面来看几种匹配图示例，图四：　

答案：

1.tr,tl；
2.cc,tl；
3.bl,bc；

也许你已经知道答案，也许还不知道为什么是这样的，下面再来进一步进行讲解。

为了便于观察与理解，请看图五：　 这里依旧是蓝色表示触点层，绿色表示弹出层。从图五中的案例一中我们可以发现：蓝色区块的右上角与绿色区块的左上角相交(咳咳，不是吃的香蕉，介个是数学用语。)于同一点。再来看图三中右上角和左上角的标记代码是多少，右上角是“tr”，左上角是“tl”。好了，这时图五中案例一的答案就已经出来了，完整写法：'points':['tr','tl']。怎么样，简单吧。其实很多时候不是问题复杂，只是你没有仔细分析而已。

下面来用此法进行案例二的剖析。案例二中的特点是：蓝色区块的正中间和绿色区块的左上角相交于同一点。再通过图三中的标记可以得到答案，正中间是cc，左上角是tl，完整写法：'points':['cc','tl']。案例三也是一样，蓝色区块的左下角与绿色区块的底部中间相交于同一点。左下角是bl，底部中间是bc，完整写法：'points':['bl','bc']

快速定位

哎呀妈呀，介太简单了，又整出来了，自豪感有木有！下面将艺灵自己的秘决公布于世：做效果前先要想清楚相交点由哪两个点组成。当你真正理解后，用这方法做弹出层特效那是“屡试不爽”啊！你学会了吗？不会没关系，多看看，好好琢磨琢磨就会了。

资源下载

Widget-demo-pop1.html淘宝Widget库中弹出层案例代码.zip

现在再来讲讲图二中的数字“④”。图片二中也有参数的讲解，通常情况下，这个是微调用的，平时基本上不怎么用。那么，它有什么样的效果呢？。附段核心测试代码：

offset微调位置

<div class="main">
<div class="ylsj-pop-cd">触点1<br />tr,tl
<div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
'trigger':'.ylsj-pop-cd',
'align':{
'node':'.ylsj-pop-cd',
'offset':[200,0],
'points':['tr','tl']
}
}">
<div class="ylsj-pop">弹出层</div>
</div>
</div>
<div class="ylsj-pop-cd2">触点2</div>
</div>

上面那串代码的效果图如下，图六：　大致效果就是这样，鼠标滑过触发点1时其对应的弹出层出现在了触发点2处。虽然举这个例子不是很形象，但在实际操作中，在做某一个特效时却要使用这个参数。到底是什么特效呢？后面会讲到。

再来讲讲图二中的数字“①”和“②”。通常情况下，这两处填写的样式名都一样，不知道有没有小伙伴试过写不同的样式名。核心测试代码：

trigger取值和node取值不同时

<div class="main">
<div class="ylsj-pop-cd">触点1<br />tr,tl
<div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
'trigger':'.ylsj-pop-cd',
'align':{
'node':'.ylsj-pop-cd2',
'offset':[0,0],
'points':['tr','tl']
}
}">
<div class="ylsj-pop">弹出层</div>
</div>
</div>
<div class="ylsj-pop-cd2">触点2</div>
</div>

小伙伴们通过代码来猜测下效果图是什么样的，效果图如下，图七：　

看上去怎么有种似曾相识的赶脚呢？不对啊老师，怎么和图六一模一样呢？你猜~

淘宝中弹出层做的那些特效

好了，前面已经将弹出层组件中的几个参数配带着案例讲解完了，下面来说说弹出层在淘宝中的实际应用效果。

用的最多的要数“鼠标滑过特效”了，例如：弹出二维码、弹出放大图、原位置替换图片等等这些都可以用弹出层来做，只不过没有了css3中的过渡效果而已。当然了，弹出层除了做这些外，还可以做“导航下拉菜单”。

早之前曾有些小伙伴觉得导航下拉特效不错前来求代码，于是艺灵将源码发布在网站以及上传到多个群里。不就是个全屏嘛，不就是个带轮播的下拉嘛，有什么的，大卸八块后他就是个弹出层做的，不知曾蒙蔽了多少美工！

说到导航下拉菜单，艺灵再啰嗦一下，在做下拉菜单时要记得巧妙利用图二中的数字号④，它可以帮你很大的忙！虽然在其它地方用不着甚至是一无是处......

好了，终于写完了，不知道小伙伴们能收获多少。最后附一个带下拉导航的店铺地址：http://shop112837831.taobao.com
免费在线生成弹出层特效代码地址：点我试用

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2014-10-30/218.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。