bootbox.js

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相关推荐

bootbox.js实践总结（一）
最近使用bootstrap做后台管理系统,弹出框用到了bootbox.js,也是和bootstrap风格匹配. 在这里记录下来使用体会. 顺序依赖 jQuery.js Bootstrap(css和js ...
bootbox.js bootbox.promt()
想用bootbox做一个弹出的输入框,输入框是必填项,想看一下API,结果bootxbox.js的官网怎么也打不开.摸索了一下,发现用this可以获取整个模态框节点,这就好办了: bootbox.pr ...
JS组件Bootstrap实现弹出框和提示框效果代码
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
bootBox 提示框插件
引用地址:https://blog.csdn.net/kiwi4814/article/details/54730109 bootbox.js官方文档中文版简介:Bootbox.js是一个小型的Ja ...
一些js 插件的作用
前言: 从一些开源网站上下载下来的后台管理系统模板一般会有很多的js ,其js 的功能是什么呢?这里随手查询了一下,记录下来正文: 1.zDialog.js 各种弹窗插件详细案例:http:// ...
前端常用插件、工具类库汇总（上）
前言在开发中,我们经常会将一些常用的代码块.功能块进行封装,为的是更好的复用.那么,被抽离出来独立完成功能,通过API或配置项和其他部分交互,便形成了插件. 下面这些是我在工作中积累的一些常用的前端 ...
cesium雷达图_20个简化开发任务的 JavaScript库
所谓JavaScript库就是预先写好的可以简化基于JavaScript的应用程序开发的,尤其是Ajax和其它以web为中心的技术的 JavaScript代码集.JavaScript主要用于写内嵌于H ...
jquery plugins
jQuery官网插件 jQuery自定义滚动条样式插件 jQuery custom content scroller examples Twitter typeahead typeahead.js t ...
【分享】Web前端开发第三方插件大全
收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...

bootbox.js

bootbox.js相关推荐

最新文章

热门文章