Notifications are the natural extension of the
classes. They should be used to inform the user of a changed state
or new information. They can be shown by default, appear after a specified period of time, disappear
after a given time, be persistent, or be closed manually.
Note Be careful not to overuse notifications. They can be extremely aggrevating to users if they are used too frequently.
Notifications have two options that control when the notification appears and disappears. All options
are passed in as an HTML5
data- attribute and none of them are required.
||The number of milliseconds before the notification is closed automatically.|
||The number of milliseconds before the notification is opened
automatically. The notification should be given the
Notifications can be closed manually by adding the following code to the notice:
<a href="#" class="close">x</a>
If you want the notification to persist, simply omit the close link.
For the example above that appears after 3 seconds and then disappears 3 seconds later, use the following code:
<div class="warningNotice hidden" data-openTime="3000" data-closeTime="6000"> <a href="#" class="close">x</a> <p>This notice will have appeared after 3 seconds. It will disappear 3 seconds later.</p> </div>