Minimalist jQuery Alert Notification Plugin - noty
File Size: | 2.98 KB |
---|---|
Views Total: | 865 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
noty is a minimalist jQuery alert notification plugin for easy message broadcasting that uses Animate.css for cool CSS3 animations.
How to use it:
1. Include the Animate.css in the head section of the webpage.
<link rel="stylesheet" href="animate.min.css">
2. Include jQuery library and the jQuery noty.js script at the bottom of the webpage.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="noty.min.js"></script>
3. Display a notification on the screen.
noty('Notification Title','Message Body');
4. The required CSS to style and position the notification.
.noty { color: #fff; background: #282828; padding: 20px 20px 20px 26px; border-radius: 5px; font-size: 14px; box-shadow: 0 1px 2px rgba(0,0,0,0.1) 0 5px 20px rgba(0, 0, 0, 0.0.5); margin-top: 17px; z-index: 9999 !important; position: fixed; bottom: 36px; left: 36px; width: 360px; } .noty .noty-close { color: #fff; font-size: 18px; display: inline-block; padding: 4px 7px; line-height: 1; border-radius: 98px; margin-top: -4px; transition: all .2s ease !important; background: rgba(255,255,255,0.04); } .noty:hover .noty-close { background: rgba(255,255,255,0.1); } .noty .noty-close:hover { color: #282828; background: #fff; cursor: pointer; } .noty p { margin-bottom: 10px; font-weight: 300; } .noty p:last-child { margin-bottom: 0; } @media (max-width:1024px) { .noty { left: 0; right: 0; bottom: 0; border-radius: 0; width: auto; } }
This awesome jQuery plugin is developed by ctclsm. For more Advanced Usages, please check the demo page or visit the official website.