easyDialog 簡(jiǎn)單、實(shí)用的彈出層組件

easyDialog沒有模板機(jī)制，只負(fù)責(zé)邏輯層的彈出效果，至于內(nèi)容(消息框、表單、圖片等)該如何呈現(xiàn)，easyDialog都不管，內(nèi)容屬于業(yè)務(wù)層的東西，業(yè)務(wù)需求是千變?nèi)f化的，如果邏輯和業(yè)務(wù)結(jié)合很緊密，那么可移植性和可擴(kuò)展性將大大降低。當(dāng)然，如果你想找那種集成了模板的彈出層，請(qǐng)移步artDialog，artDialog的模板設(shè)計(jì)得很精美，功能也是很豐富的，但是體積比較大，壓縮后的體積還是有18KB，如果是注重性能的網(wǎng)站，一個(gè)彈出層組件有這么大至少對(duì)于我來說是沒法容忍的，在某些情況下優(yōu)點(diǎn)恰恰也成了缺點(diǎn)，easyDialog始終保持著超輕量級(jí)。

easyDialog不依賴框架，使用起來很簡(jiǎn)單，只要引入easydialog.js文件就可以使用了：

// 引入easyDialog
<script src="easydialog.js" type="text/javascript"></script>

比如想彈出一個(gè)id為box的消息框，那么只需將id以字符串的形式傳進(jìn)去即可：

easyDialog.open({
    container : 'box'
});

關(guān)閉彈出窗口，只要調(diào)用關(guān)閉的方法即可：

easyDialog.close();

這是最簡(jiǎn)單的調(diào)用，container參數(shù)也是必須要有的，默認(rèn)就是彈出的消息框下面有遮罩層，并且是相對(duì)于頁面靜止定位并垂直居中。如果想實(shí)現(xiàn)其他的效果且看下面的參數(shù)說明。

參數(shù)說明：

• container string

• 彈出層內(nèi)容的id，該參數(shù)是必填項(xiàng)。

• isOverlay boolean

• 是否添加遮罩層，true為添加，false為不添加，默認(rèn)是true。

• fixed boolean

• 是否相對(duì)于頁面靜止定位，true為靜止，false為不靜止，默認(rèn)是ture。

• follow string&object

• 彈出層跟隨自定義元素來定位，參數(shù)可以是id也可以是Dom對(duì)象。

• followX number

• 相對(duì)于跟隨元素的X軸偏移，和follow參數(shù)同時(shí)使用。

• followY number

• 相對(duì)于跟隨元素的Y軸偏移，和follow參數(shù)同時(shí)使用。

• autoClose number

• 自動(dòng)關(guān)閉彈出層，單位為毫秒，默認(rèn)為0，不自動(dòng)關(guān)閉。

• callback function

• 關(guān)閉彈出層時(shí)執(zhí)行的回調(diào)函數(shù)，默認(rèn)為null。