bootstrap大氣alert彈窗組件:messenger
阿新 • • 發佈:2017-05-10
-s jpg 控件 主題 xtra erro 特意 window after
今天用到了這個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