個人寫這個彈出框的原因就一個，就是能給我帶來可復用，追求新，要簡單，可擴展。要達到炫酷有點難度，分析后還是決定以功能為主，因為是用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)調用，使用彈出框的方法傳入一個對象，對象的格式是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)。