Avoid reveal modal closing upon click of an element not in the DOM

Added check to make sure e.target is still in the DOM. I came across a bug when I created a google map canvas inside reveal modal, whereby upon closing the info popup on a map marker, the entire reveal modal gets closed. This is because when the overlay click handler is invoked, Google code has already removed the e.target  element and the overlay handler only gets a ghost element and can not find it in the modal element

diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js
index 02f99c77a2ab13889adc098862c32c3a7905cd34..b38f8efb6dc7f43d59f8d08206d56da1de88ec53 100644 (file)
--- a/js/foundation.reveal.js
+++ b/js/foundation.reveal.js
@@ -157,7 +157,11 @@ class Reveal {
 
     if (this.options.closeOnClick && this.options.overlay) {
       this.$overlay.off('.zf.reveal').on('click.zf.reveal', function(e) {
-        if (e.target === _this.$element[0] || $.contains(_this.$element[0], e.target)) { return; }
+        if (e.target === _this.$element[0] || 
+          $.contains(_this.$element[0], e.target) || 
+            !$.contains(document, e.target)) { 
+              return; 
+        }
         _this.close();
       });
     }
@@ -293,7 +297,9 @@ class Reveal {
 
     if (!this.options.overlay && this.options.closeOnClick && !this.options.fullScreen) {
       $('body').on('click.zf.reveal', function(e) {
-        if (e.target === _this.$element[0] || $.contains(_this.$element[0], e.target)) { return; }
+        if (e.target === _this.$element[0] || 
+          $.contains(_this.$element[0], e.target) || 
+            !$.contains(document, e.target)) { return; }
         _this.close();
       });
     }