How to use
Success message
Error message
Warning message
Message timeout
Custom toast
Custom toast (No icons)
Html toast
Dark style toast
Set messages position

How to use

                        

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="toastStyle.min.css">
    </head>
    <body>

        <script src="toast.min.js"></script>
    </body>
</html>

Success Message

                            
init({
    fade_in : 800 ,
    fade_out : 800 ,
    position : 'bottom-left'
});
                                    
                                    
toast({ 
    title : 'Hi' , 
    description : 'Success message' ,
    type : 'success' ,
    timeout : 0
})

Error Message

                            
init({
    fade_in : 800 ,
    fade_out : 800 ,
    position : 'bottom-left'
});
                                    
                                    
toast({ 
    title : 'Hi' , 
    description : 'Error message' ,
    type : 'error' ,
    timeout : 0
})

Warning Message

                            
init({
    fade_in : 800 ,
    fade_out : 800 ,
    position : 'bottom-left'
});
                                    
                                    
toast({ 
    title : 'Hi' , 
    description : 'Warning message' ,
    type : 'warning' ,
    timeout : 0
})

Message timeout

                        
init({
fade_in : 800 ,
fade_out : 800 ,
position : 'bottom-left'
});
                                
                                
toast({ 
title : 'Hi' , 
description : 'Message with timeout' ,
type : 'success' ,
timeout : 1000 //ms , default : 0 , 0 & null = No time limit
})

Custom toast

                        
init({
fade_in : 800 ,
fade_out : 800 ,
position : 'bottom-left'
});
                                
                                
toast({ 
title : 'Hi' , 
description : 'Custom message' ,
timeout : 0
type : 'custom' ,
close_color: '#3498db' ,
border_color: '#3498db' ,
icon : 'url(https://img.icons8.com/flat_round/2x/info.png)'  //null = no icon'}
})

Custom toast (No icons)

                        
init({
fade_in : 800 ,
fade_out : 800 ,
position : 'bottom-left'
});
                                
                                
toast({ 
title : 'Hi' , 
description : 'Custom message (whitout icon)' ,
timeout : 0
type : 'custom' ,
close_color: '#3498db' ,
border_color: '#3498db' ,
//icon : 'url(https://img.icons8.com/flat_round/2x/info.png)'  //null = no icon'}
})

Html Message

                            
init({
    fade_in : 800 ,
    fade_out : 800 ,
    position : 'bottom-left'
});
                                    
                                    
toast({ 
    title : '<span style="color : red"> Hi </span>' , 
    description : '<b> HTML </b> description.' ,
    type : 'success' ,
    timeout : 0
})

Dark style

                            
init({
    fade_in : 800 ,
    fade_out : 800 ,
    position : 'bottom-left'
});
                                    
                                    
toast({
    title:'<span style="color:#f9f9f9">Hi</span>' ,
    description: '<span style="color:#bdc3c7">Dark style toast notification</span>' ,
    close_color: '#f1c40f' ,
    border_color: '#f1c40f' ,
    color : '#212121' ,
    type:'custom' 
})

Set messages position

                            
init({
    fade_in : 800 ,
    fade_out : 800 ,
    position : 'top-center'
});
                                    
                                    
toast({ 
    title : 'Hi' , 
    description : 'Success message' ,
    type : 'success' ,
    timeout : 0
})