From f33b059b68173baa1d6775884df7463602bdad02 Mon Sep 17 00:00:00 2001
From: 5um17 <5um17.mail@gmail.com>
Date: Thu, 5 Apr 2018 00:50:04 +0530
Subject: [PATCH] updated readme and examples
---
README.md | 80 +++++++++++++++++++++++++++++++++++-----------
example/index.html | 9 ++++--
2 files changed, 68 insertions(+), 21 deletions(-)
diff --git a/README.md b/README.md
index e048c80..0a8713d 100644
--- a/README.md
+++ b/README.md
@@ -1,19 +1,23 @@
# modernAlert.js #
-A small JavaScript snippet to override native js functions **alert**, **confirm** and **prompt**.
+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.
-### [Demo](http://www.secretsofgeeks.com/2015/09/modernAlert.html#modernAlertExamples)
+By default native functions are replaced with modernAlert functions but this can be [turned off](https://github.com/5um17/modernAlert#disable-native-functions-overriding) in the constructor.
+
+## [Demo](https://www.secretsofgeeks.com/2015/09/modernAlert.html#modernAlertExamples)
+
+## Installation
+Download the stable version of modernAlert from [here](https://github.com/5um17/modernAlert/releases) OR development version from [here](https://github.com/5um17/modernAlert/archive/master.zip)
-### Installation
Include ```modernAlert.min.js``` in the head tag of your project.
```html
```
-Call the constructor anywhere in your custom js or head.
+Call the constructor anywhere in your custom js or head only once.
```javascript
modernAlert();
```
-### Usage
+## Usage
##### Alert
Call basic alert
```javascript
@@ -23,6 +27,17 @@ Call alert with custom title
```javascript
alert('Alert Message', 'Title for alert Box');
```
+Call alert with callback and with a variable
+```javascript
+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
```javascript
@@ -37,7 +52,7 @@ function callback_function(valueFromConfirm) {
}
}
```
-Passing a js variable to callback function
+Passing a variable to callback function
```javascript
confirm('Confirm Message', 'Confirm title', callback_function, 'confirmID: 01');
@@ -71,7 +86,25 @@ function callback_function(valueFromPrompt, promptTime) {
}
```
-### Customization
+## 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`.
+```javascript
+modernAlert({
+ overrideNative: false
+ });
+```
+
+Call any function using global variable `modernAlert`
+```javascript
+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:
```javascript
@@ -84,35 +117,46 @@ modernAlert({
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
+ overlayBlur: 2, //Set false to disable it or interger for pixle
+ overrideNative: true
});
-
-/* Change the title background color and title color */
+```
+
+Change the title background color and title color
+```javascript
modernAlert({
titleBackgroundColor: 'blue',
titleColor: 'white'
});
+```
-/* Change overlay color */
+Change overlay color
+```javascript
modernAlert({
overlayColor: 'rgba(255, 255, 255, 0.3)'
});
-
-/* Disable background blur */
+```
+
+Disable background blur
+```javascript
modernAlert({
overlayBlur: false
});
```
-Change button values
+#### Changing buttons label
+
+Change buttons label for all functions
```javascript
-/* Change buttons values for all functions */
modernAlert({
defaultButtonsText: {ok : 'textForOkButton', cancel : 'textForCancelButton'}
});
-/* Change buttons values for single pop-up */
-alert('Confirm Message', 'Confirm title', null, {ok : 'textForOkButton', cancel : 'textForCancelButton'});
+```
+
+Change buttons label for single function
+```javascript
+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 of itself.
+```modernAlert()``` return internal object.
diff --git a/example/index.html b/example/index.html
index 6fa6ad8..ecad709 100644
--- a/example/index.html
+++ b/example/index.html
@@ -3,11 +3,11 @@
-
+