個人寫這個彈出框的原因就一個，就是能給我帶來可復用，追求新，要簡單，可擴展。要達到炫酷有點難度，分析後還是決定以功能為主，因為是用jq和animation實現的彈出框組件，所以看起來難度不大，簡稱co-dialog。 演示效果DEMO 靈感來源，因為工作中用到dialog，發現UI設計的彈出框的風格 ...
個人寫這個彈出框的原因就一個，就是能給我帶來可復用，追求新，要簡單，可擴展。要達到炫酷有點難度，分析後還是決定以功能為主，因為是用jq和animation實現的彈出框組件，所以看起來難度不大，簡稱co-dialog。
靈感來源，因為工作中用到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)調用，使用彈出框的方法傳入一個對象，對象的格式是keys and value形式，功能主要圍繞彈出框的基礎佈局設置以及佈局屬性和樣式、數據的填充、公用方法的事件處理。基礎佈局的設置有哪些屬性？(邊距的預設值之後改過)
如下：
dialogWidth
彈出框的整體寬度
default: 558
options: integer
dialogHeight
彈出框的整體高度
default: 300
options: integer
headerMargin
標題的外邊距設置
default: 10 || { horizontal: 0, vertical: 0} || { horizontal: '10px 10px', vertical: '10px 10px' }
options: integer || { horizontal: integer, vertical: integer } || { horizontal: string, vertical: string }
bodyMargin
容器的內容外邊距(其實內部封裝的時候設置為內邊距)
default: 10 || { horizontal: 0, vertical: 0} || { horizontal: '10px 10px', vertical: '10px 10px' }
options: integer || { horizontal: integer, vertical: integer } || { horizontal: string, vertical: string }
footerMargin
底部的內容外邊距(同上)
default: 10 || { horizontal: 0, vertical: 0} || { horizontal: '10px 10px', vertical: '10px 10px' }
options: integer || { horizontal: integer, vertical: integer } || { horizontal: string, vertical: string }
以上都是在methods方法之前調用的屬性，也就是說給彈出框設置的這些屬性都會直接被使用，如果你發現還有更好的方案，可以去git上直接討論，如果提的建議nice那麼必會採納。我更佳喜歡人性化，自由開放的發言。
下麵是數據的填充：
title
標題的內容填充
default: ''
options: string
message
容器的內容填充
default: ''
options: stringfooterText
底部內容的填充(可以和按鈕共存)
default: ['',...]
options: array ([string, string]) 以上都是填充彈出框的自定義內容，其中底部的文本填充需要註意，這個(footerText)的值是寫在數組裡面的一組字元串。我們甚至還可以在methos方法裡面使用this操作內容填充。
methods: function (nodes) {
this.title = '協議已開通';
this.message = '<a href>趕快充值吧！</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)。
