Bootstrap智能消息提示框

柔光的暖阳◎ 2021-09-10 15:26 531阅读 0赞

Bootstrap智能消息提示框。

“我觉得操作成功后，需要一个弹出提示框”，客户说。  
“需要吗？我觉得没必要，错误的时候提示，成功时自动跳转就行了！”，我弱弱的答。  
“你那样不人性化，听我的，加一个”，客户继续说。  
“那好吧！”我继续弱弱的答。

## 第一关 ##

其实客户的要求，一点都难不倒我，看我的：

ajaxDoneSuccess("订单已支付", "/mem/initDeal/2");

这串代码就是把消息传递到前端。

1. 页面回调函数执行时，获取服务端传递的消息，同时将后续操作加入到thenfunc中。  
2. 紧接着，通过showInfo函数将消息输出。  
3. 你想看到showInfo方法，没问题。

$.showInfo = function(str, func) { 
        $.weeboxs.open(str, {
            boxid : 'yunm_info_box',
            contentType : 'text',
            showButton : true,
            showCancel : false,
            showOk : true,
            title : '提示 ',
            type : 'wee',
            onclose : func
        });
    };

打开一个weebox弹出框，然后弹出框关闭的时候执行后续函数func。

![这里写图片描述][20151015172315661]

然后你点击确定或者X号就会执行回调函数跳转。

## 第二关 ##

“你这不够人性化，不是所有的执行成功都想弹出消息。”客户说。  
“好，明白”，我答。

这依然很简单：

ajaxDoneSuccess("", "/mem/initDeal/2");

if (msg) {
    $.showInfo(msg, thenfunc, YUNM._set.timeout);
    } else {
        thenfunc();
    }

## 第三关 ##

“你这还不够人性化，我不想点击确定、关闭，就能够跳转。”客户说。  
“好，你想它多长时间自动关闭，才能让你’dont make me wait’”，我喃喃道。  
“什么？”，客户把头朝向我，若有所思的问。  
“哦，没啥，一会就好”，我懒得给他啰嗦。

这也没啥，不就是加一个timeout嘛，weebox本身就有这个参数。

if (msg) {
        $.showInfo(msg, thenfunc, YUNM._set.timeout);
    } else {
        thenfunc();
    }

$.showInfo = function(str, func, timeout) { 
        $.weeboxs.open(str, {
            boxid : 'yunm_info_box',
            contentType : 'text',
            showButton : true,
            showCancel : false,
            showOk : true,
            title : '提示 ' + timeout + "秒后自动关闭",
            type : 'wee',
            onclose : func,
            timeout : timeout
        });
    };

> 笑对现实的无奈，不能后退的时候，不再傍徨的时候，永远向前　路一直都在──陈奕迅《路一直都在》  
> 本文出自:【[沉默王二的博客][Link 1]】

[20151015172315661]: /images/20210506/929b139e518745aea7b4f9609f177486.png
[Link 1]: http://blog.csdn.net/qing_gee