Messenger 弹窗的使用

关于Messenger 弹窗的文档及详细的说明请参考　Messenger官网，这时只介绍　Messenger　弹窗的使用

 messenger依赖与jquery和Backbone.js，可以和  Bootstrap　完美结合，但Bootstrap 并不是必需的

１.首先要引用　css 文件，一个是全局的css文件即 messenger.css，　一个是 主题风格的样式文件 messenger-theme-future.css　

　 <link href="/Content/scripts/messenger/messenger.css" rel="stylesheet" />
    <link href="/Content/scripts/messenger/messenger-theme-ice.css" rel="stylesheet" />

２.引入　js　文件,与css 一样，一个是全局的js,即 messenger.min.js, 一个是主题样式 js 　，messenger-theme-future.js，

<script src="/Content/scripts/messenger/messenger.min.js" type="text/javascript"></script>
 <script src="/Content/scripts/messenger/messenger-theme-future.js" type="text/javascript"></script>

3.文件引入好后，开始配置弹窗的主题，及弹窗出现在页面上的位置

• 有四种主题可选,弹出框有6个位置可供选择
• Future 对应 messenger-theme-future.css
• Block 对应 messenger-theme-block.css
• Air 对应 messenger-theme-air.css
• Ice 对应 messenger-theme-ice.css

        $._messengerDefaults = {
            extraClasses: 'messenger-fixed messenger-theme-ice messenger-on-top'
        }

4.调用　messenger的接口，并设置好提示文字和一些样式　

        $.globalMessenger().post({
            message: "发生错误,请稍后重试!",
            hideAfter: 3,
            type: 'error',
            showCloseButton: true
        });

参考文章：

http://www.bootcss.com/p/messenger/　　　　　　Ｍessenger　官网

http://github.hubspot.com/messenger/　　　　　　git源码托管

https://github.com/HubSpot/messenger/　　　　　giti源码

http://segmentfault.com/a/1190000000358289　　　其它介绍