可多層嵌套、高定制化的模態(tài)窗口bDialog

基于Boostrap Modal功能進(jìn)行增加、擴(kuò)展的可多層嵌套、定制靈活的模態(tài)窗口

效果預(yù)覽

模態(tài)窗口效果圖：

消息對話框模式效果圖：

遮罩模式效果圖：

邊角通知窗口效果圖：

bDialog使用入門指南、Demo、文檔

更多實(shí)例、文檔請?jiān)L問：

https://terryz.github.io/bdialog/index.html

項(xiàng)目GitHub地址：

https://github.com/TerryZ/bDialog

如果您覺得項(xiàng)目還不錯(cuò)，還請給項(xiàng)目（Github / 碼云）加個(gè)Star，以支持鼓勵(lì)作者的工作

功能特點(diǎn)

基于jQuery、bootstrap2,3進(jìn)行開發(fā)
可多層嵌套，并擁有各自獨(dú)立的上下文
靈活的窗口元素定制
可在同一頁面下展示各種不同樣式、風(fēng)格的窗口皮膚
瀏覽器尺寸發(fā)生改變時(shí)，窗口將自動(dòng)重新定位到瀏覽器中心區(qū)域
模態(tài)窗口區(qū)域外點(diǎn)擊、窗口自動(dòng)定位等場景均有相應(yīng)的提醒動(dòng)畫效果
嚴(yán)格遵守Bootstrap Modal原生HTML代碼結(jié)構(gòu)，可自動(dòng)適應(yīng)所有基于Bootstrap的風(fēng)格皮膚
豐富的回調(diào)函數(shù)

瀏覽器兼容：IE8+、Chrome、Firefox等

插件基于jQuery開發(fā)，建議在Bootstrap環(huán)境下使用，目前支持Bootstrap2、Bootstrap3

窗口模式：

模態(tài)窗口（Modal）
消息對話框（Alert）
遮罩（Mask）
邊角通知窗口（Toast）

目標(biāo)用戶群體

bDialog開發(fā)之初，目的是為了統(tǒng)一開發(fā)團(tuán)隊(duì)對于Bootstrap Modal的使用方式，例如統(tǒng)一設(shè)置背景點(diǎn)擊不關(guān)閉窗口，關(guān)閉底部按鈕區(qū)域，統(tǒng)一設(shè)置參數(shù)接收，回調(diào)函數(shù)等基礎(chǔ)功能；后續(xù)更是著重解決了窗口多層嵌套打開的功能需求，尤其是解決了該死的IE8下多層打開會(huì)導(dǎo)致瀏覽器崩潰的問題。

插件針對在項(xiàng)目中使用了Bootstrap作為基礎(chǔ)UI框架，同時(shí)更希望使用Bootstrap原生態(tài)組件的群體。

Bootstrap原生提供的功能組件，功能性相對較弱，bDialog并不重新造輪子，而是在原生組件的基礎(chǔ)上進(jìn)行功能加強(qiáng)、擴(kuò)展，使得更符合開發(fā)上的功能需求，通過不斷的功能完善和問題修復(fù)，bDialog插件就一直更新到了現(xiàn)在。幾年來經(jīng)過多個(gè)團(tuán)隊(duì)和多個(gè)項(xiàng)目的使用，將項(xiàng)目進(jìn)行開源，希望項(xiàng)目可以讓更多的團(tuán)隊(duì)，個(gè)人受益。

怎么使用bDialog

在 Github 或碼云上下載最新的版本，解壓后并放入需要使用的項(xiàng)目中

或使用 npm 指令

npm install bdialog

資源導(dǎo)入

Javascript初始化插件

//初始化插件
bDialog.open({
    title : '窗口標(biāo)題',
    width : 500,
    height : 450,
    url : 'http://aa.com/load',
    params : {
        'userName' : 'zhangsan'
    },
    callback:function(data){
        if(data && data.results && data.results.length > 0 ){
            eDialog.alert('已完成彈出窗口操作！
接收到彈出窗口傳回的 userName 參數(shù)，值為：' + data.results[0].userName + '');
        }else{
            eDialog.alert('彈出窗口未回傳參數(shù)',$.noop,'error');
        }
    }
});

bDialog可多層嵌套、高定制化的模態(tài)窗口