一个简单的弹出框组件

我的写这个弹出框的缘由就一个，就是能给我带来可复用，追求新，要简单，可扩展。要达到炫酷有点难度，分析后仍是决定以功能为主，由于是用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)。