A lightweight small pop up widget with no dependencies, create notifications easily with this javascript plugin.
Playground in Codepen.
Include spop.js and spop.css in your page.
<link href="spop.css" rel="stylesheet">
<!-- Even better, SamallPop is made with scss, @import to your style.scss -->
<script src="spop.js"></script>and call it:
spop('Default SmallPop');
spop('<h4 class="spop-title">Success</h4>I´m a success SmallPop', 'success');
spop('<strong>Warning pop</strong>', 'warning');
spop('<strong>Error Here!</strong>', 'error');SmallPox has six differents positions: top-left, top-center, top-right, bottom-left, bottom-center and bottom-right
// top left example
spop({
template: 'Position top left',
position : 'top-left',
style: 'success'
});In mobile (max-width:30em), all go down.
Autoclose, to... close... automatically...
spop({
template: '3 seconds autoclose',
autoclose: 3000
});There can only be one SmallPop visible from each group.
spop({
template: 'All fields are required!',
group: 'submit-satus',
style: 'error'
});
spop({
template: 'Your information has been submitted',
group: 'submit-satus',
style: 'success'
autoclose: 2000
});Do what you need onOpen and onClose
spop({
template: 'Please, close me.',
onOpen: function () {
document.body.style.background = "#fff";
},
onClose: function() {
document.body.style.background = "";
spop({
template: 'Thank you!',
style: 'success',
autoclose: 2000
});
}
});In your template you can call the close event, just add data-spop="close".
spop('Got to <a href="#demo-defaults" data-spop="close">defaults</a>');spop({
template : null,// string required. Without it nothing happens!
style : 'info',// success, warning or error
autoclose : false,// miliseconds
position : 'top-right',// top-left top-center bottom-left bottom-center bottom-right
icon : true,// or false
group : false,// string, add a id reference
onOpen : function() { },
onClose : function() { }
});Chrome, Firefox, IE 11-10-9 (9 no animations), Android Browser, Chrome for Android, Safari, iOS Safari
MIT License
Created by Sílvio Rosa • Follow me on twitter for updates.