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

 

转载于:https://www.cnblogs.com/peace1/p/bootbox.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值