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.

Preview

Demo Download

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". 

cuteAlert({
    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.

cuteAlert({
    type: 'question',
    title: 'Quick reminder!',
    message: 'Are you sure?',
    confirmText: 'Yes',
    cancelText: 'No'
}).then(function(e){
    if(e == 'confirm'){
        alert('Thanks')
    }else{
        alert(':-(')
    }
})

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.

cuteToast({
    type: 'success', //Other options : error, warning, info
    message: 'MESSAGE HERE',
    timer: 5000,// milli second
})

February 22, 2022 Tags : javascript , Modal & Popup