Page Title

Popify.js

A simple JS Library

INSTALLATION

Copy and paste the following in the head tag of your web code:

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',
})

Created with favorite by Bartika

Popify (my first js library? 🤔)