modernAlert.js

A small JavaScript snippet for customizable alert, confirm and prompt functions. It provides customizable HTML pop-ups instead of browser based pop-ups which can be styled using number of arguments and traditional way of using CSS.

By default native functions are replaced with modernAlert functions but this can be turned off in the constructor.

Demo

Installation

Download the stable version of modernAlert from here OR development version from here

Include modernAlert.min.js in the head tag of your project.

<script type="text/javascript" src="./modernAlert.min.js"></script>

Call the constructor anywhere in your custom js or head only once.

modernAlert();

Usage

Alert

Call basic alert

alert('Alert Message');

Call alert with custom title

alert('Alert Message', 'Title for alert Box');

Call alert with callback and with a variable

alert('Alert Message', 'Title for alert Box', callback_function, new Date());

/* Define your callback function */
function callback_function(valueFromAlert, time) { 
    if (valueFromAlert === true) {
        console.log('This alert was called at ' + time.toString());
    }
}

Confirm

Call basic Confirm

confirm('Confirm Message', 'Confirm title', callback_function);

/* Define your callback function */
function callback_function(valueFromConfirm) { 
    if (valueFromConfirm === true) {
        console.log('User clicked yes');
    } else {
        console.log('User clicked no');
    }
}

Passing a variable to callback function

confirm('Confirm Message', 'Confirm title', callback_function, 'confirmID: 01');

/* Define your callback function */
function callback_function(valueFromConfirm, extra_var) { 
    if (valueFromConfirm === true) {
        console.log('User clicked yes and confirmID: ' + extra_var);
    } else {
        console.log('User clicked no and confirmID: ' + extra_var);
    }
}

Prompt

Call the simple prompt

prompt('Prompt Message', 'Prompt title', callback_function);

/* Define your callback function */
function callback_function(valueFromPrompt) { 
    console.log('User enterd: ' + valueFromPrompt);
}

Passing a js variable to callback function

prompt('Prompt Message', 'Prompt title', callback_function, new Date());

/* Define your callback function */
function callback_function(valueFromPrompt, promptTime) { 
    console.log('User enterd: ' + valueFromPrompt + ' and prompt time was: ' + promptTime.toString());
}

Disable native functions overriding

You can disable the native functions overriding and can use native alert, confirm and prompt functions altogether with modernAlert functions.

When calling constructor pass overrideNative with false.

modernAlert({
                overrideNative: false
            });

Call any function using global variable modernAlert

modernAlert.alert('Alert Message', 'Title for alert Box');
modernAlert.confirm('Confirm Message', 'Confirm title', callback_function);
modernAlert.prompt('Prompt Message', 'Prompt title', callback_function);

NOTE: No matter if overrideNative set to false or true you can always use modernAlert.alert syntax.

Customization

You can pass color combinations and other settings in calling constructor. Default arguments are:

/* Default arguments */
modernAlert({
                backgroundColor: '#fff',
                color: '#555',
                borderColor: '#ccc',
                titleBackgroundColor: '#e8a033',
                titleColor: '#fff',
                defaultButtonsText: {ok : 'Ok', cancel : 'Cancel'},
                overlayColor: 'rgba(0, 0, 0, 0.5)',
                overlayBlur: 2, //Set false to disable it or interger for pixle
                overrideNative: true
            });

Change the title background color and title color

modernAlert({
                titleBackgroundColor: 'blue',
                titleColor: 'white'
            });

Change overlay color

modernAlert({
                overlayColor: 'rgba(255, 255, 255, 0.3)'
            });

Disable background blur

modernAlert({
                overlayBlur: false
            });
            

Changing buttons label

Change buttons label for all functions

modernAlert({
                defaultButtonsText: {ok : 'textForOkButton', cancel : 'textForCancelButton'}
            });

Change buttons label for single function

alert('Confirm Message', 'Confirm title', null, null, {ok : 'textForOkButton', cancel : 'textForCancelButton'});
confirm('Confirm Message', 'Confirm title', callback_function, null, {ok : 'textForOkButton', cancel : 'textForCancelButton'});

modernAlert() return internal object.