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

  • 相关阅读:
    8086汇编中的逻辑地址与物理地址转换
    wepy开发踩坑记录
    cordova开发的坑
    express转发请求
    Hybrid app(cordova) 环境配置记录
    laravel-mix 热重载404的问题
    练习
    git 使用记录
    Vue全家桶开发笔记
    微信小程序开发踩坑记录
  • 原文地址:https://www.cnblogs.com/peace1/p/bootbox.html
Copyright © 2020-2023  润新知