使用bootboxjs实现模拟框弹框的效果-微信信息发源地

使用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实现模拟框弹框的效果

赞 (1)
分享到:更多 ()

评论 0

评论前必须登录!

登陆 注册