使用YUI3建立Popup彈出層

YUI3是一個非常好的開源架構，但是學習曲線稍微有些陡峭，這個系列将記錄下我使用YUI3過程中的一些心得點滴，希望對大家能夠有幫助。

很多網際網路的項目應用中，彈出層出現的越來越多，使用YUI3可以快速的實作制作彈出層的效果。

YUI3提供了Overlay這個元件來實作可定位、可疊加的彈出層效果，這個彈出層同時還包含标準的布局子產品。

首先是包含YUI的基礎檔案，因為Overlay元件使用中要用到WidgetPosition、WidgetStack、WidgetPositionAlign、WidgetPositionConstrain等元件，簡單的方法是隻引用YUI的種子檔案，他會根據情況自動加載需要的元件。

之後，我們就可以建立YUI的執行個體了。

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

傳給use最後的一個參數是一個回調函數。該回調函數在YUI執行個體完成了頁面中缺少的檔案加載後開始執行。

Overlay元件繼承自Widget類，是以初始化方式同Widget一樣，可以接受一個配置對象來設定初始的環境變量。Overlay初始的方式有很多種，即支援基于已有的HTML生成的方式，也支援代碼動态建立的方式生成。我們可以根據自己的需求選擇不同的方式。個人認為基于已有HTML的方式，比較容易控制HTML的結構和樣式，友善後期的修改，對于包含複雜彈出層内容的應用比較合适。而代碼動态建立的方式，則适合顯示簡單資訊的場景。

使用HTML的方式，需要準備的HTML為（Markup）：

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

也可以完全使用動态的方式來建立彈出，在腳本中指定要彈出的内容。

僅僅有上面這些還不夠，我們還需要未彈出層設計位置和樣式，光秃秃的彈出幾句話來隻會引起使用者的奇怪。YUI提供了豐富的選項允許我們對Overlay進行定制，下面是參數清單：

彈出層一般會綁定在一個事件上，比如滑鼠單擊按鈕後，出現彈出層，那麼首先需要綁定事件的函數：

Y.on(event, fn, selector);

這個函數還可以接受其他的一些參數，具體的可以參考 YUI Development。