bootbox:一個彈出框插件，官網看一下例子就好了：http://bootboxjs.com/examples.html

目前來說應該只要調用bootbox.js就可以了，沒有css的問題

1.有最基本的調用就是

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

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

2.再加一步就是有回調函數了，callback

　這個好呀

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

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

3.再深一步就是配置參數咯

　　

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

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

4.不止是回調函數，還有可以定義彈出框的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實現各種css了

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

　　

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

是的，就是這個backdrop參數，要是沒有設置的話是點擊背景層的話是沒有反應的

7.還可以在彈出框添加你想要添加的按鈕呀，然后利用回調函數來執行一些你想要執行的事

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; }}
}

這個是可以在彈出框上添加三個按鈕，你分別點擊這三個按鈕的時候可以在每個按鈕上添加一個回調函數，

這樣你點擊的時候就會做出相應的反應

?

這些只是bootbox的alert操作

還有confirm，prompt操作

這個在官網上都有

上面給的那個鏈接已經很清晰了

然后我就寫到這里了

因為我了解到這里就差不多可以了

還有很長的路需要走

繼續加油吧

怎么說呢

你也可以說我寫的這篇博文對你來說是沒有用的，因為網上這種用法一抓一大把

我只是想記錄下來我的知識

如果能幫助到別人那就是更好的一件事了

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的bootbox.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。