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

bootstrap大气alert弹窗组件：messenger

2024-09-21 02:04:08   217人阅读

　　今天用到了这个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


联系
我们