bootbox.js

yan的圖書41 2017-07-13

展開全文

bootbox:一個彈出框插件，官網(wǎng)看一下例子就好了：http:///examples.html

目前來說應(yīng)該只要調(diào)用bootbox.js就可以了，沒有css的問題

1.有最基本的調(diào)用就是

bootbox.alert("This is the default alert!");

就什么都不做，只要alert一下就已經(jīng)完成了它的使命，要是只要實現(xiàn)這樣的話我覺得完全沒必要引入這個插件呀，只要自己alert一下不就好了

2.再加一步就是有回調(diào)函數(shù)了，callback

　這個好呀

bootbox.alert("This is an alert with a callback!", function(){ console.log('This was logged in the callback!'); });

你對這個彈出框執(zhí)行了操作，就能做一些你想做的事，恩

3.再深一步就是配置參數(shù)咯

bootbox.alert({
    message: "This is an alert with a callback!",
    callback: function () {
        console.log('This was logged in the callback!');
    }
})

跟剛才一樣的效果，但是我感覺看起來就會讓人很舒服，我們老大一直強調(diào)的就是什么，你寫的代碼不止讓你自己看起來舒服，你要讓別人看起來也舒服，確實這樣很好啊我覺得

4.不止是回調(diào)函數(shù)，還有可以定義彈出框的size

bootbox.alert({
    message: "This is the small alert!",
    size: 'small'
});

5.可以添加自定義的className

bootbox.alert({
    message: "This is an alert with an additional class!",
    className: 'bb-alternate-modal'
});

可以給那個大的div加自定義的類，然后你就可以隨意給這個div實現(xiàn)各種css了

6.還有就是點擊背景層的時候也可以觸發(fā)這個彈出框

bootbox.alert({
    message: "This alert can be dismissed by clicking on the background!",
    backdrop: true
});

是的，就是這個backdrop參數(shù)，要是沒有設(shè)置的話是點擊背景層的話是沒有反應(yīng)的

7.還可以在彈出框添加你想要添加的按鈕呀，然后利用回調(diào)函數(shù)來執(zhí)行一些你想要執(zhí)行的事

buttons: {
                    "確定": {
                        className: "btn-success",
                        callback: function () {
                            $(obj).parent().parent().find('input').val(selectedImage.id);
                            $(obj).parent().parent().find('img').attr('src', selectedImage.url);
                            selectedImage = {};

                            if (more) {
                                var moreObj = $('#albumsClone').children().first().clone();
                                moreObj.find('input').val('');
                                moreObj.find('img').attr('src', './public/plug/dist/img/noimage.gif');
                                $('#albumsClone').append(moreObj);
                            }
                        }
                    },
                    "取消": {
                        className: "btn-default",
                        callback: function () {

                        }
                    },
                    "刪除": {
                        className: "btn-danger",
                        callback: function () {
                            // var delUrl = URL + "Admin/File/delImage/id/" + selectedImage.id;
                            // $.get(delUrl, function (data) {
                            //     var p = $('#dialog-imageUploader .pagination .current').text();
                            //     var pagUrl = URL + "Admin/File/imageUploader/p/" + p;
                            //     $.pjax({
                            //         url: pagUrl,
                            //         container: '.bootbox .bootbox-body',
                            //         push: false,
                            //     });
                            // });
                            // return false;
                        }
                    }
}