bootbox是boostrap集成的弹窗,基本能完成后台系统的需求,下面是一些使用方法
1.bootbox.alert
bootbox.alert使用方法主要有三种
直接传内容
bootbox.alert('弹窗信息')
传对象
/* @ message 弹窗的信息,必须要有的属性 @ callback 点击确定的回调函数 */ bootbox.alert({ message:'弹窗信息', callback:function(){ console.log('点击了确定'); } })
效果如下
2.bootbox.confirm
/* @ message 弹窗的信息,必须要有的属性 @ callback 点击弹窗按钮的回调函数,确定传的value为true,取消为fasle, @ buttons 按钮的信息 */ bootbox.confirm({ message:'弹窗信息', callback:function (value) { console.log(value) } }) bootbox.confirm({ message:'弹窗信息', callback:function (value) { console.log(value) }, buttons:{ confirm:{ confirm:'确认按钮', className:'btn-primary' }, cancel:{ confirm:'取消按钮', className:'btn-default' } } })
3.bootbox.prompt
效果过于逗B,不过多讨论
bootbox.prompt({ title: '弹窗标题', callback: function(value) { console.log('你输入的内容为' + value) } })
4.bootbox.dialog
以上三个方法最后都是通过转换参数调用dialog的(转换的方法写的挺好的,有心情的可以看看)
bootbox.dialog({ message: "弹窗内容", title: "弹窗标题", buttons: { Cancel: { label: "取消", className: "btn-default", callback: function () { console.log("点击了取消"); } } , OK: { label: "OK", className: "btn-primary", callback: function () { console.log("点击了确定"); } } } });
结束语:
boostrap的这套弹窗,简单实现了基本的交互,但是遇到复杂的交互的话(点击按钮前做些事情,失败不关闭弹窗,点击取消和弹窗右上角的x是调用不同的事件....),还是自己写一套吧~