Overlay close conditional logic. Fixes #199

zurb · Dec 4, 2014 · b27f679 · b27f679
1 parent 290b384
commit b27f679
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -268,7 +268,7 @@ <h4>Stay Updated</h4>
     </div>
     <!-- /App frame -->
 
-        <div zf-modal size="small" id="mainModal" overlay="true">
+        <div zf-modal size="small" id="mainModal" overlay="true" overlay-close="true">
           <div class="grid-block vertical">
             <div class="primary title-bar">
               <div class="center title">Title Bar</div>

diff --git a/js/angular/directives/modal.js b/js/angular/directives/modal.js
@@ -22,8 +22,8 @@ angular.module('foundation.modal')
           var dialog = angular.element(element.children()[0]);
 
           scope.active = false;
-          scope.overlay = scope.overlay || scope.overlayClose || false;
-          scope.overlayClose = scope.overlayClose || false;
+          scope.overlay = scope.overlay === 'true' || scope.overlayClose === 'true' ? true : false;
+          scope.overlayClose = scope.overlayClose === 'true' ? true : false;
 
           var animationIn = attrs.animationIn || 'fadeIn';
           var animationOut = attrs.animationOut || 'fadeOut';
@@ -53,7 +53,13 @@ angular.module('foundation.modal')
             } else {
               foundationApi.animate(element, scope.active, overlayIn, overlayOut);
             }
-          }
+          };
+
+          scope.hideOverlay = function() {
+            if(scope.overlayClose === 'true') {
+              scope.hide();
+            }
+          };
 
           scope.hide = function() {
             scope.active = false;