关于Messenger 弹窗的文档及详细的说明请参考 Messenger官网,这时只介绍 Messenger 弹窗的使用
messenger依赖与jquery和Backbone.js,可以和 Bootstrap 完美结合,但Bootstrap 并不是必需的
1.首先要引用 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" />
2.引入 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/ Messenger 官网
http://github.hubspot.com/messenger/ git源码托管