首页 > 代码库 > bootstrap大气alert弹窗组件:messenger

bootstrap大气alert弹窗组件:messenger

  今天用到了这个alert控件,特意分享一下。地址是:

  http://www.bootcss.com/p/messenger/

 

技术分享

  使用方法里面写的很清楚,先把js和css两个文件引入,剩下一个css文件是主题四选一。上图主题为future,个人认为最好看的一个。

      引入文件后初始化该组件:

    $._messengerDefaults = {
        extraClasses: ‘messenger-fixed messenger-theme-future messenger-on-top‘
    };

  

  但要注意一点:里面的语言是coffeescript,点击JavaScript按钮貌似切换不了。

      如果使用js写一个简单的弹框。语法是这样的:

$.globalMessenger().post("Your request has succeded!");  

    

  或者加上一些配置:比如几秒后自动关闭:

$.globalMessenger().post({
    errorMessage: "服务器错误,请稍后重试!",
    hideAfter: 2,
    showCloseButton: true
});

  最后,在使用时如果不想用这种方法,那就重新定义一下alert()方法:

window.alert = function(message){
    $.globalMessenger().post({
        message: message,
        hideAfter: 3,
        showCloseButton: true
    });
};

  

  至此,就可以直接使用alert()啦。。。

   

bootstrap大气alert弹窗组件:messenger