v.1.0.5 - Added overlay option

CHANGELOG.md

@@ -12,3 +12,8 @@ All notable changes to this repository (after v. 1.0.3) will be recorded in this
 	- Default accent color: #7F8C8D
 - Allow usage of setting a duration and using the `closeConfirm` option simultaneously
 - Added official overhang.js logo
+
+## 1.0.5 - (07-08-2017)
+### Updates
+
+- Added the option for displaying a customizable overlay

README.md

@@ -64,9 +64,9 @@ If you would like to use a custom theme, leave this parameter blank and follow t
 
 ```javascript
 $("body").overhang({
-   custom: true, // Set custom to true
-   primary: "#34495E", // Your custom primary color
-   accent: "#F4B350" // Your custom accent color
+  custom: true, // Set custom to true
+  primary: "#34495E", // Your custom primary color
+  accent: "#F4B350" // Your custom accent color
 });
 ```
 
@@ -94,28 +94,42 @@ The speed to drop and raise the alert in milliseconds. The default is set to `50
 
 ##### `closeConfirm`
 
-Set this to true if you would like the user to have to close the alert rather than it disappearing by itself. The default is set to `false`.
+Set this to `true` if you would like the user to have to close the alert rather than it disappearing by itself. The default is set to `false`.
 
 ##### `upper`
 
-Set this to true if you would like your message in all uppercase letters. The default is set to `false`.
+Set this to `true` if you would like your message in all uppercase letters. The default is set to `false`.
 
 ##### `easing`
 
-JQuery UI easing option for the drop effect. The default is set to `"easeOutBounce"`
+jQuery UI easing option for the drop effect. The default is set to `"easeOutBounce"`
 
 ##### `html`
 
 This is a boolean if the `message` argument should be interpreted as HTML. The default value is set to `false`.
 
+##### `overlay`
+
+Set this to `true` if you would like to have an overlay displayed with your alert. The default value is set to `false`. You can also pass in a value to the `overlayColor` argument to specify the color of the overlay. The default is set to black.
+
+```javascript
+$("body").overhang({
+  type: "confirm",
+  message: "Do you want to continue?",
+  closeConfirm: "true",
+  overlay: true,
+  overlayColor: "#1B1B1B"
+});
+```
+
 #### Basic Alert Notification Example
 
 ```javascript
 // Some error notification
 $("body").overhang({
-   type: "error",
-   message: "You could not be logged in at this time.",
-   closeConfirm: "true"
+  type: "error",
+  message: "You could not be logged in at this time.",
+  closeConfirm: "true"
 });
 ```
 
@@ -128,8 +142,8 @@ When using prompts, all you need to do is set the `type` parameter to `"prompt"`
 ```javascript
 // Some prompt notification
 $("body").overhang({
-   type: "prompt",
-   message: "What is your name"
+  type: "prompt",
+  message: "What is your name"
 });
 ```
 
@@ -158,9 +172,9 @@ This is the color of the "false" button. The default is set to `"#E74C3C"`.
 ```javascript
 // Some confirmation
 $("body").overhang({
-   type: "confirm",
-   yesMessage: "Yes please!",
-   noMessage: "No thanks."
+  type: "confirm",
+  yesMessage: "Yes please!",
+  noMessage: "No thanks."
 });
 ```
 
@@ -173,11 +187,11 @@ To retrieve the data, you simply pass in a callback function with one parameter:
 
 ```javascript
 $("body").overhang({
-   type: "prompt",
-   message: "What is your name",
-   callback: function (value) {
-      alert("You entered " + value);
-   }
+  type: "prompt",
+  message: "What is your name",
+  callback: function (value) {
+    alert("You entered " + value);
+  }
 });
 ```
 

demo/js/index.js

@@ -6,7 +6,6 @@
  * paul@paulkr.com
  */
 
-
 $(document).ready(function () {
 
   $(".sample").click(function () {
@@ -33,7 +32,7 @@ $(document).ready(function () {
   $(".example--3").click(function () {
     $("body").overhang({
       type: "info",
-      message: "This message will close in 5 seconds!",
+      message: "⏲️ I will close in 5 seconds!",
       duration: 5,
       upper: true
     });
@@ -43,14 +42,16 @@ $(document).ready(function () {
     $("body").overhang({
       type: "warn",
       message: "A user has reported you!",
-      duration: 3
+      duration: 3,
+      overlay: true
     });
   });
 
   $(".example--5").click(function () {
     $("body").overhang({
       type: "prompt",
-      message: "What's your name?"
+      message: "What's your name?",
+      overlay: true
     });
   });
 
@@ -64,7 +65,8 @@ $(document).ready(function () {
   $(".example--7").click(function () {
     $("body").overhang({
       type: "confirm",
-      message: "Are you sure?"
+      message: "Are you sure?",
+      overlay: true
     });
   })
 
@@ -100,9 +102,10 @@ $(document).ready(function () {
       accent: "#27AE60",
       yesColor: "#3498DB",
       message: "Do you want to continue?",
+      overlay: true,
       callback: function (value) {
-        var response = value ? "yes" : "no";
-        alert("You made your selection of " + response);
+        var response = value ? "Yes" : "No";
+        alert("You made your selection of: " + response);
       }
     });
   });
@@ -118,6 +121,8 @@ $(document).ready(function () {
       message: snapchatIcon + snapchatNote,
       custom: true,
       html: true,
+      overlay: true,
+      overlayColor: "#FFFF00",
       callback: function (value) {
         if (value) {
           window.location.href = "https://www.snapchat.com/add/thepaulkr";

index.html

@@ -71,7 +71,7 @@
 <pre style="width: 350px"><code class="language-javascript">
 $("body").overhang({
   type: "info",
-  message: "This message will close in 5 seconds!",
+  message: "⏲️ I will close in 5 seconds!",
   duration: 5,
   upper: true
 });
@@ -85,12 +85,13 @@
 $("body").overhang({
   type: "warn",
   message: "A user has reported you!",
-  duration: 3
+  duration: 3,
+  overlay: true
 });
 </code></pre>
           </div>
           <div class="code-info">
-            <p class="type">Warning Message</p>
+            <p class="type">Dim Overlay Screen</p>
             <button class="try-button example--4">Try me</button>
           </div>
         </div>
@@ -105,7 +106,8 @@
 <pre style="width: 290px"><code class="language-javascript">
 $("body").overhang({
   type: "prompt",
-  message: "What's your name?"
+  message: "What's your name?",
+  overlay: true
 });
 </code></pre>
           </div>
@@ -116,7 +118,8 @@
 <pre style="width: 270px"><code class="language-javascript">
 $("body").overhang({
   type: "confirm",
-  message: "Are you sure?"
+  message: "Are you sure?",
+  overlay: true
 });
 </code></pre>
           </div>
@@ -154,9 +157,10 @@
   accent: "#27AE60",
   yesColor: "#3498DB",
   message: "Do you want to continue?",
+  overlay: true,
   callback: function (value) {
-    var response = value ? "yes" : "no";
-    alert("You made your selection of " + response);
+    var response = value ? "Yes" : "No";
+    alert("You made your selection of: " + response);
   }
 });
 </code></pre>
@@ -184,6 +188,8 @@
   message: snapchatIcon + snapchatNote,
   custom: true,
   html: true,
+  overlay: true,
+  overlayColor: "#FFFF00",
   callback: function (value) {
     if (value) {
       window.location.href = "https://www.snapchat.com/add/thepaulkr";

lib/overhang.css

@@ -31,6 +31,18 @@
 .overhang-message a { color: inherit; }
 .overhang-message a:hover { text-decoration: none; }
 
+.overhang-overlay {
+  position         : fixed;
+  display          : block;
+  background-color : #000;
+  opacity          : .6;
+  top              : 0;
+  bottom           : 0;
+  left             : 0;
+  right            : 0;
+  z-index          : 9998;
+}
+
 .overhang-prompt-field {
   height        : 30px;
   width         : 250px;

lib/overhang.js

@@ -9,9 +9,12 @@
 $.fn.overhang = function (arguments) {
 
   var $element = $(this);
+
   var $overhang = $("<div class='overhang'></div>");
+  var $overlay = $("<div class='overhang-overlay'></div>");
 
   $(".overhang").remove();
+  $(".overhang-overlay").remove();
 
   // Flat UI color themes
   var themes = {
@@ -40,13 +43,15 @@ $.fn.overhang = function (arguments) {
     upper        : false,
     easing       : "easeOutBounce",
     html         : false,
+    overlay      : false,
     callback     : function () {}
   };
 
   var attributes = $.extend(defaults, arguments);
 
   // Raise the overhang alert
   function raise (runCallback, identifier) {
+    $overlay.fadeOut(100);
     $overhang.slideUp(attributes.speed, function () {
       if (runCallback) {
         attributes.callback(identifier !== null ? $element.data(identifier) : "");
@@ -159,6 +164,17 @@ $.fn.overhang = function (arguments) {
   // Slide overhang down
   $overhang.slideDown(attributes.speed, attributes.easing);
 
+  // Dim overlay
+  if (attributes.overlay) {
+
+    // Apply overlay color
+    if (attributes.overlayColor) {
+      $overlay.css("background-color", attributes.overlayColor);
+    }
+
+    $element.append($overlay);
+  }
+
   // Animate drop down and up
   if (attributes.closeConfirm && !arguments.duration) {
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "overhang",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "A JQuery plugin for notifications, prompts and confirmations.",
   "repository": {
     "type": "git",