码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap大气alert弹窗组件:messenger

时间:2017-05-10 21:20:56      阅读:485      评论:0      收藏:0      [点我收藏+]

标签:组件   acl   控件   func   esc   注意   show   str   top   

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

标签:组件   acl   控件   func   esc   注意   show   str   top   

原文地址:http://www.cnblogs.com/samous/p/6837925.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!