Beautiful Alert / Confirm / Toast message box create with HTML, CSS and JS only

Cute Alert is javascript library that can create beautiful Alert, Confirm and Toast message easily without any dependency libraries.


Author: gustavosmanc
Official Page: Go to website
License: MIT

How to use it:

Add javascript script and css files into HTML page 
<link rel="stylesheet" href="./style.css"/>
<script src="./cute-alert.js"></script>
Just call "cuteAlert" function and provide required parameters "title", "message" and "type". Cute Alert can create 5 types of alert box. "success", "error", "warning", "info" and "question". 
    type: 'success', //Other options : error, warning, info, question
    title: 'TITLE HERE',
    message: 'MESSAGE HERE'

Question type dialog can set "confirmText" and "cancelText" optional parameters, by default they are set as "Confirm" and "Cancel" respectively. cuteAlert() returns a Promise, so you can use then function to execute an action after the alert box frame is closed.

    type: 'question',
    title: 'Quick reminder!',
    message: 'Are you sure?',
    confirmText: 'Yes',
    cancelText: 'No'
    if(e == 'confirm'){

Optional parameters 

buttonText : Text for button, by default it's set as "OK"
closeStyle : Close button style. Can set "circle" for close circle button.

Toast message

To show toast message, call cuteToast() function and pass type, message and timer parameters.
    type: 'success', //Other options : error, warning, info
    message: 'MESSAGE HERE',
    timer: 5000,// milli second

No Comments