使用bootboxjs实现模拟框弹框的效果

想必做后台的朋友都知道，后台有很多的地方都有用到弹出模拟框的效果，而且一般的后台框架都是自己带有这样的效果的。

但是这个有一个局限的问题就是，怎么快速的实现这样的功能。现在一般实现有以下的两种方案：

1、使用js实现hide和show的功能，通过display:none和display:block来实现模拟框的隐藏和展示。

2、通过后台框架自己带的model功能来实现隐藏和显示功能。

农成今天在这里就展示这样的方法了，想必大家也有自己的见解。一般的项目中也有这样的实现，农成在这里就不多费口舌了。

主要是给大家介绍bootboxjs这个js的框架，因为农成发现他如果配合 Bootstrap能够实现很好的效果。

官网在这里： http://bootboxjs.com/ 里面有很多的功能，大家可以去看看。

农成在这里就只给大家讲一下怎么来使用这个功能。

function answer(id){
    bootbox.prompt({
        title: "讲师回复",
        inputType: 'textarea',
        callback: function (result) {
            if(result != null){//一个小tip
                if(!result){
                    alert('回复不能为空!');
                    return false;
                }
            } 
            console.log(result);
            console.log(id);
        }
    });
}

上面就是农成使用到了的demo所用到的js代码。是不是很简单就实现了一个medal的效果。

农成只说一下这个类型怎么使用的，回调函数怎么使用，其他的功能大家可以去官网看一下doucment。

这个回调函数callback就是来处理确认之后的代码逻辑的，result的值就是其输入框或者文本输入框的值。这里农成要强调一点，这是农成碰到的一个比较傻逼的问题。

当result为null时候，就是模拟框取消的效果，但是一旦你使用的callback函数，那么无论是取消还是确认都会走callback函数，那么怎么来区分这个动作呢，农成通过分析官网的文档，就发现当result为null的时候，此时的动作一定是取消的，所以做一个区分就可以实现了。

未经允许不得转载：微信信息发源地 » 使用bootboxjs实现模拟框弹框的效果