Merge pull request #21 from base-apps/fix-modal-overlay-events

resolves #20
base-apps · Jul 19, 2016 · e5091a7 · e5091a7
2 parents 3df326e + d186040
commit e5091a7
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 6 deletions.
diff --git a/docs/assets/js/app.js b/docs/assets/js/app.js
@@ -321,7 +321,7 @@
         class: 'tiny dialog',
         overlay: true,
         overlayClose: false,
-        templateUrl: 'partials/examples-dynamic-modal.html',
+        templateUrl: 'partials/examples-dynamic-modal2.html',
         contentScope: {
           close: function() {
             modal.deactivate();

diff --git a/docs/partials/examples-dynamic-modal2.html b/docs/partials/examples-dynamic-modal2.html
@@ -0,0 +1,8 @@
+<div class="grid-block vertical text-center">
+  <div class="grid-content">
+    <strong>This modal was created programmatically using an <a  href="https://docs.angularjs.org/guide/providers" target="_blank">Angular Factory</a></strong>
+    <br/>
+    <br/>
+    <a class="button" ng-click="close()">Close</a>
+  </div>
+</div>
diff --git a/docs/templates/modal.html b/docs/templates/modal.html
@@ -170,7 +170,7 @@ <h3>Angular-ize Your Modals</h3>
       'class': 'tiny dialog',
       'overlay': true,
       'overlayClose': false,
-      'templateUrl': 'partials/examples-dynamic-modal.html',
+      'templateUrl': 'partials/examples-dynamic-modal2.html',
       'contentScope': {
         'close': function() {
           modal.deactivate();

diff --git a/js/angular/components/modal/modal.html b/js/angular/components/modal/modal.html
@@ -1,9 +1,8 @@
 <div
   class="modal-overlay"
-  ng-click="hideOverlay()">
+  ng-click="hideOverlay($event)">
   <aside
     class="modal"
-    ng-click="$event.stopPropagation();"
     ng-transclude>
   </aside>
 </div>
diff --git a/js/angular/components/modal/modal.js b/js/angular/components/modal/modal.js
@@ -81,8 +81,8 @@
         var overlayIn = 'fadeIn';
         var overlayOut = 'fadeOut';
 
-        scope.hideOverlay = function() {
-          if(scope.overlayClose) {
+        scope.hideOverlay = function($event) {
+          if($event.target.id == attrs.id && scope.overlayClose) {
             foundationApi.publish(attrs.id, 'close');
           }
         };