使用YUI3创建Popup弹出层

YUI3是一个非常好的开源框架，但是学习曲线稍微有些陡峭，这个系列将记录下我使用YUI3过程中的一些心得点滴，希望对大家能够有帮助。

很多互联网的项目应用中，弹出层出现的越来越多，使用YUI3可以快速的实现制作弹出层的效果。

YUI3提供了Overlay这个组件来实现可定位、可叠加的弹出层效果，这个弹出层同时还包含标准的布局模块。

首先是包含YUI的基础文件，因为Overlay组件使用中要用到WidgetPosition、WidgetStack、WidgetPositionAlign、WidgetPositionConstrain等组件，简单的方法是只引用YUI的种子文件，他会根据情况自动加载需要的组件。

<script type="text/javascript" charset="utf-8" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"> </script>

之后，我们就可以创建YUI的实例了。

YUI().use(“overlay”, function(Y){ });

传给use最后的一个参数是一个回调函数。该回调函数在YUI实例完成了页面中缺少的文件加载后开始执行。

Overlay组件继承自Widget类，所以初始化方式同Widget一样，可以接受一个配置对象来设置初始的环境变量。Overlay初始的方式有很多种，即支持基于已有的HTML生成的方式，也支持代码动态创建的方式生成。我们可以根据自己的需求选择不同的方式。个人认为基于已有HTML的方式，比较容易控制HTML的结构和样式，方便后期的修改，对于包含复杂弹出层内容的应用比较合适。而代码动态创建的方式，则适合显示简单信息的场景。

使用HTML的方式，需要准备的HTML为（Markup）：

<div id="myContent"> <div class="yui3-widget-hd">Overlay Header</div> <div class="yui3-widget-bd">Overlay Body</div> <div class="yui3-widget-ft">Overlay Footer</div> </div>

在实例化的时候，需要在配置对象中指定一个到HTML的引用。引用可以是元素的ID\可以是YUI对象，也可以是一个选择器，如果选择到了多个符合的元素，则默认使用第一个。

来看一下基本的例子：

YUI().use('overlay', function(Y){     var popup = new Y.Overlay({         srcNode:"#myContent",         visible:false,         width:'650px',         height:'650px'     }).render(); });

也可以完全使用动态的方式来创建弹出，在脚本中指定要弹出的内容。

仅仅有上面这些还不够，我们还需要未弹出层设计位置和样式，光秃秃的弹出几句话来只会引起用户的奇怪。YUI提供了丰富的选项允许我们对Overlay进行定制，下面是参数列表：

image

我觉得 x,y\zIndex\align\centered 都是非常常用也非常有用的属性，具体的使用可以参考YUI的官方说明。

弹出层一般会绑定在一个事件上，比如鼠标单击按钮后，出现弹出层，那么首先需要绑定事件的函数：

Y.on(event, fn, selector);

这个函数还可以接受其他的一些参数，具体的可以参考 YUI Development。