Foundation offers beautiful notifications. Unfortunately they don't offer a nice way to customize them very well (like positioning, automatic closing...). That is why I decided to create a little plugin for that.
<div class="notifications top-right"></div>
Notifications supports four different position classes, only if utilizing the css file provided.
| Position | Class Name | Description |
|---|---|---|
| Top Left | top-left | Notifications will appear fixed in the top-left corner |
| Top Right | top-right | Notifications will appear fixed in the top-right corner |
| Bottom Left | bottom-left | Notifications will appear fixed in the bottom-left corner |
| Bottom Right | bottom-right | Notifications will appear fixed in the bottom-right corner |
$('.top-right').notify({
message: {text: 'Aw yeah, It works!'}
}).show(); // for the ones that aren't closable and don't fade out there is a .hide() function.
| Name | type | default | description |
|---|---|---|---|
| type | string | ... | Alert style (secondary, alert, success...) |
| 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. |