bootbox api

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是调用不同的事件....），还是自己写一套吧~