Popify (js library)

Popify (js library)
INSTALLATION
Copy and paste the following in the head tag of your web code:
<script src=”https://raw.githack.com/BartikaKumar/Popify/main/script.js”></script>

USAGE
Use the alertify() function to pop-up an alert and the toastify() function to use a toast.
alertify({
title:'Simple Alert',
text:'This is a simple alert.',
})

ALERTIFY
The alertify() function accepts an object as the argument. You can use the following keys in the object to set-up the custom alert box:

Name Type
title string
text string
html html markup code
confirmButtonText string
cancelButton boolean
denyButton boolean
cancelButtonText string
denyButtonText string
confirmButtonColor a color
cancelButtonColor a color
denyButtonColor a color
onConfirmed function
onCanceled function
onDenied function
footer string
input boolean
inputSetAttributes Object (keys= attributes, values= values)
removeBackdropBlur boolean
alertWidth css width value
animationIn string (“scale-up” / “scale-down” / “fade-up” / “fade-down” / “fade-left” / “fade-right”)
animationOut string (“scale-up” / “scale-down” / “fade-up” / “fade-down” / “fade-left” / “fade-right”)
darkMode boolean
alertBoxColor a color
alertBoxTextColor a color
alertPersistOnConfirmed boolean
alertPersistOnCanceled boolean
alertPersistOnDenied boolean
autoTimerClose int (milliseconds)
onAutoTimerClose function
The onConfirmed, onCanceled, onDenied, and onAutoTimerClose functions accept an argument which contain the value of the input (if it is there).

alertify({
title:'Sample Alert',
html:'<b>Lorem ipsum dolor sit amet</b>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
cancelButton:true,
denyButton:true,
confirmButtonText:'Yes',
denyButtonColor:'#bb86fc',
onConfirmed:function(a){
console.log(a)
},
footer:'This is so simple',
input:true,
inputSetAttributes:{
type:'number',
},
animationIn:'fade-left',
animationOut:'fade-left',
darkMode:true,
alertPersistOnCanceled:true,
})

TOASTIFY
Use the alertify() function to pop-up an alert and the toastify() function to use a toast.

Name Type
toastBoxColor a color
toastBoxTextColor a color
toastBoxShadow css shadow syntax
toastBoxTextAlign string
toastWidth css width
animationIn string (“scale-up” / “scale-down” / “fade-up” / “fade-down” / “fade-left” / “fade-right”)
animationOut string (“scale-up” / “scale-down” / “fade-up” / “fade-down” / “fade-left” / “fade-right”)
text string
html html markup code
position string (“top right” / “top left” / “bottom right” / “bottom left”)
toastCloseTimer int (milliseconds)
toastify({
text:'This is me!',
toastBoxColor:'tomato',
toastBoxTextColor:'white',
toastBoxShadow:'none',
toastBoxTextAlign:'center',
toastWidth:'90vw',
animationOut:'scale-up',
position:'top left',
toastCloseTimer:'1000',
})

Share your love

Leave a Reply