This time I will share jQuery Plugin and tutorial about Simple Snackbar Style Alert Box Plugin For jQuery, hope it will help you in programming stack.
A simple and mobile-friendly jQuery notification plugin to create customizable, CSS animated notification boxes inspired by Material Design Snackbars.
How to use it:
1. Insert the jQuery Simple Alert Plugin’s JavaScript and CSS files into the web page.
1 |
<link rel="stylesheet" href="/path/to/src/jquery-simple_alert.css" /> |
2 |
<script src="/path/to/cdn/jquery.min.js"></script> |
3 |
<script src="/path/to/src/jquery-simple_alert.js"></script> |
2. Display a basic snackbar notification on the screen.
2 |
text: 'This is a snackbar style notification' |
3. Determine the position of the notification box.
- bl: Bottom Left
- br: Bottom Right (Default)
- tl: Top Left
- tr: Top Right
2 |
text: 'This is a snackbar style notification', |
4. Customize the text and background colors.
2 |
text: 'This is a snackbar style notification', |
5. Trigger a function when you click the ‘Okay’ button.
2 |
text: 'This is a snackbar style notification', |
3 |
after_alert: function () { |
6. Override the default styles & CSS3 animations in the CSS.
03 |
background-color: green; |
08 |
transition: all .1s ease; |
09 |
transition-property: top, right, bottom, left, opacity; |
10 |
font-family: Roboto, sans-serif; |
14 |
justify-content: space-between; |
