updated readme and examples

5um17 · Apr 4, 2018 · f33b059 · f33b059
1 parent 0c0d8fd
commit f33b059
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 21 deletions.
diff --git 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
 <script type="text/javascript" src="./modernAlert.min.js"></script>
 ```
-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
@@ -3,11 +3,11 @@
     <head>
         <style type="text/css">
             body { background: none repeat scroll 0 0 #4682b4; font-family: arial,sans-serif; font-size: 87.5%; margin: 0; text-align: center; }
-            ul.link-list { list-style: none outside none; margin: 0; padding: 0; display: inline-block; }
+            ul.link-list { list-style: none outside none; margin: 0; padding: 0; margin: 5px 0; }
             ul.link-list li { background: none repeat scroll 0 0 #b0e0e6; display: inline-block; }
             ul.link-list a { color: #000000; text-decoration: none; padding: 10px; display: inline-block; }
         </style>
-        <script type="text/javascript" src="modernAlert.min.js"></script>
+        <script type="text/javascript" src="modernAlert.js"></script>
         <script type="text/javascript">
             modernAlert();
             function modernAlertCallback(input) {
@@ -30,8 +30,11 @@ <h1>modernAlert.js</h1>
             <li><a href="javascript:alert('Hi this is example of alert<br />Line break', 'Simple Alert!');">Alert</a></li>
             <li><a href="javascript:confirm('Hi this is example of confirm<br />Are you sure ?', 'Simple Confirm!', modernAlertCallback);">Confirm</a></li>
             <li><a href="javascript:prompt('Hi this is example of prompt<br />Your name ?', 'Simple Prompt!', modernAlertCallback);">Prompt</a></li>
-            <li><a href="javascript:alert('Hi this is example of alert<br />with custom button text', 'Alert!', null, {ok : 'Yeah!'});">Alert With Custom button text</a></li>
+        </ul>
+        <ul class="link-list">
+            <li><a href="javascript:alert('Hi this is example of alert<br />with custom button text', 'Alert!', null, null, {ok : 'Yeah!'});">Alert With Custom button text</a></li>
             <li><a href="javascript:confirm('Hi this is example of confirm with custom buttons text<br />Are you sure ?', 'Simple Confirm!', modernAlertCallback, null, {ok:'Delete', cancel:'Back'});">Confirm With Custom button text</a></li>
+            <li><a href="javascript:alert('Hi this is example of alert<br />Line break', 'Simple Alert!', modernAlertCallback);">Alert with callback</a></li>
         </ul>
     </body>
 </html>