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操作
这个在官网上都有
上面给的那个链接已经很清晰了
然后我就写到这里了
因为我了解到这里就差不多可以了
还有很长的路需要走
继续加油吧
怎么说呢
你也可以说我写的这篇博文对你来说是没有用的,因为网上这种用法一抓一大把
我只是想记录下来我的知识
如果能帮助到别人那就是更好的一件事了