一個簡單的彈出框組件

我的寫這個彈出框的緣由就一個，就是能給我帶來可複用，追求新，要簡單，可擴展。要達到炫酷有點難度，分析後仍是決定以功能爲主，由於是用jq和animation實現的彈出框組件，因此看起來難度不大，簡稱co-dialog。

演示效果DEMO

靈感來源，由於工做中用到dialog，發現UI設計的彈出框的風格一直在變化，因而每次都要從新寫一個彈出框，無心中增長了無用的工做量，因此果斷就封裝成一個彈出框組件，目前的錐形僅支持PC，而後又加入了CSS3動畫效果，若是要引入動畫效果就須要高版本的Browser才能使用，指望你能一塊兒加入參與改進！+1

目前支持一個CSS3動畫組件的功能，固然在co-dialog也能調用動畫方法coani，調用方式和.use()或.app()方法同樣，加入動畫.coani()方法，具體動畫api參考co-ani文檔。
這個彈出框使用起來很簡單，只要實例一次對象，就能夠調用api。

var codialog = new codialog();

如今咱們可使用對象(codialog)，調用一個方法(app)，只須要傳入一個節點(.class)或(#id)名，類型爲字符串格式。

codialog.app('.open-success')

以後咱們繼續接下來的方法(use)調用，使用彈出框的方法傳入一個對象，對象的格式是keysandvalue形式，功能主要圍繞彈出框的基礎佈局設置以及佈局屬性和樣式、數據的填充、公用方法的事件處理。基礎佈局的設置有哪些屬性？(邊距的默認值以後改過)

// 彈出框
codialog.use({
    ... configure options
})

// 如何顯示彈出框
codialog.app('div.selector').show() 
or 
codialog.show('div.selector')

// 使用動畫的方式也很簡單
codialog.coani('.selector').bounch().stop();
codialog.coani.render();

以下：

dialogWidth
彈出框的總體寬度

default:558
options:integer

dialogHeight
彈出框的總體高度

default:300
options:integer

headerMargin
標題的外邊距設置

default:10||{horizontal:0,vertical:0}||{horizontal:'10px10px',vertical:'10px10px'}
options:integer||{horizontal:integer,vertical:integer}||{horizontal:string,vertical:string}

bodyMargin
容器的內容外邊距(其實內部封裝的時候設置爲內邊距)

default:10||{horizontal:0,vertical:0}||{horizontal:'10px10px',vertical:'10px10px'}
options:integer||{horizontal:integer,vertical:integer}||{horizontal:string,vertical:string}

footerMargin
底部的內容外邊距(同上)

default:10||{horizontal:0,vertical:0}||{horizontal:'10px10px',vertical:'10px10px'}
options:integer||{horizontal:integer,vertical:integer}||{horizontal:string,vertical:string}

以上都是在methods方法以前調用的屬性，也就是說給彈出框設置的這些屬性都會直接被使用，若是你發現還有更好的方案，能夠去git上直接討論，若是提的建議nice那麼必會採納。我更佳喜歡人性化，自由開放的發言。

下面是數據的填充：
title
標題的內容填充

default:''
options:string

message
容器的內容填充

default:''
options:string

footerText
底部內容的填充(能夠和按鈕共存)

default:['',...]
options:array([string,string])

以上都是填充彈出框的自定義內容，其中底部的文本填充須要注意，這個(footerText)的值是寫在數組裏面的一組字符串。咱們甚至還能夠在methos方法裏面使用this操做內容填充。

methods:function(nodes){
this.title='協議已開通';
this.message='<ahref>趕快充值吧！</a>';
}

接下來，咱們還須要在methods公用方法以前處理一些api的調用，好比onHeaderBefore、onBodyBefore、onFooterBefore的函數方法的執行，在這裏咱們能夠作哪些操做？咱們僅僅在此設置佈局的樣式，爲啥要在這裏，由於這裏設置的方法能實現自適應的佈局居中的功能。

下面是佈局居中、屬性和樣式的方法：

onHeaderBefore
設置頭部的節點元素的attribute和style

default:callback
options:function

onBodyBefore
設置容器的節點元素的attribute和style

default:callback
options:function

onFooterBefore
設置底部的節點元素的attribute和style

default:callback
options:function

接下來的是公用的方法事件處理，幫助咱們實現更加人性化的操做，避免咱們的業務需求，減小考慮的事件處理，好比關閉的事件(isClose)，還有多級的按鈕的做用(footerButtonCount)。

footerButtonCount
底部按鈕的個數(若是設置0，就會remove移除按鈕塊，最多有2個按鈕)

default:1
options:integer(0/1/2)

isClose
關閉的按鈕事件，默認位true，點擊右側關閉按鈕就會隱藏彈出框，反之同理。

default:true
options:boolean(true/false)

若是你看了以後，還有其餘更好的想法，請直接砸過來。
以上就是這個彈出框插件(co-dialog)的全部功能，看效果和code直接進(co-dialog)。