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.
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.
Call the constructor anywhere in your custom js or head only once.
Usage
Alert
Call basic alert
Call alert with custom title
Call alert with callback and with a variable
/* 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
/* 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
/* 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
/* Define your callback function */
function callback_function(valueFromPrompt) {
console.log('User enterd: ' + valueFromPrompt);
}
Passing a js variable to callback function
/* 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.
overrideNative: false
});
Call any function using global variable modernAlert
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:
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
titleBackgroundColor: 'blue',
titleColor: 'white'
});
Change overlay color
overlayColor: 'rgba(255, 255, 255, 0.3)'
});
Disable background blur
overlayBlur: false
});
Changing buttons label
Change buttons label for all functions
defaultButtonsText: {ok : 'textForOkButton', cancel : 'textForCancelButton'}
});
Change buttons label for single function
confirm('Confirm Message', 'Confirm title', callback_function, null, {ok : 'textForOkButton', cancel : 'textForCancelButton'});
modernAlert() return internal object.