spop.js---A lightweight small pop up widget with no dependencies, create notifications easily with this javascript plugin


This plugin is a lightweight pop up with javascript.
github here

I test all the usual applications here and found out it's very easy to use and looks good if you combine with bootstrp.

Demo😜
Step1:
link spop.css and spop.js
also link bootstrp for more easy and fancy button styles.
also link jquery for click events which is handy.

in head

in body

Step2:
html
html
With buttons and id individual, it's easy to select in the script.And with bootstrap class name for buttons, they show fancy here.

CSS
a little stylish for test position.
css
Step3:
js
js
Four types of basic call functions. 
Default
success
warning
error
js group
It's same for spop call of each.

js callback
When the pop opens, the button appends the word"lol" for one click.
When the pop closes, another pop shows success messages and close automatically.

js event
Call the close event with data-spop="close".

Options :
Templete: the modul of pop messages. could be strings or html
Style:the styles of pop/can be info,success,warning or error
Autoclose:whether close by itself
Position: the position of the pop.can be top-right,top-left,top-center,bottom-left,bottom-center,bottom-right.
Icon:whether show the icon
group:whether group the pop
onOpen: callback function when open the pop
onClose:callback function when close the pop





Popular posts from this blog

Fancyapps — easily build overlay windows with carousel

Meet Tippy.js: The Complete Tooltip Popover Plugin

Meet Mantine: A TS-Based Open-Source React Components Library