Notify 基于 Bootstrap 的事件通知 jQuery 插件

以往的网页通知警告框都是在固定的位置，虽然有颜色字体的区分提示用户，但确实及其不友好的，他们也不够人性化的显示通知，这篇文章给大家介绍一个基于 Bootstrap 的插件，在网页的四个角落弹出消息通知。

什么是真正的通知，旨在提示用户最新的消息和警告，Notify是这样的一个插件，可以弹出一个警告框，在网页的四个角，可以自定义配置外观显示效果，并且可以自动隐藏。

使用方法

Notify 默认使用 Bootstrap 的警告框样式显示通知，当然你也可以使用自定义的显示样式。

<link href="css/styles/alert-bangtidy.css" rel="stylesheet">
<link href="css/styles/alert-blackgloss.css" rel="stylesheet">

除了引入上面的两个文件外，我们还需要引入 Notify 和 Bootstrap 的文件

<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="js/bootstrap-notify.js"></script>

接下来编写 HTML 代码

<div class='notifications top-left'></div>

配置 top-* 类，可以设置通知显示位置，通知支持四种不同的位置类，只有利用所提供的 CSS 文件。

JavaScript代码

$('.top-left').notify({
    message: { text: 'Aw yeah, It works!' }
}).show();
// 对于那些不可关闭且不褪色的函数，可以使用 .hide() 函数

Name	type	default	description
type	string	‘success’	Alert style, omit `alert-` from style name.
closable	boolean	true	Allow alert to be closable through a close icon.
transition	string	‘fade’	Alert transition, pretty sure only `fade` is supported, you can try others if you wish.
fadeOut	object	…	Fade alert out after a certain delay (in ms) Object structure: `fadeOut: { enabled: true, delay: 3000 }`
message	object	…	Text to show on alert, you can use either html or text. HTML will override text. Object structure: `message: { html: false, text: 'This is a message.' }`
onClose	function	…	Called before alert closes.
onClosed	function	…	Called after alert closes.