From 5551e12853bb29de7ba685bea7dcdc8628bc186b Mon Sep 17 00:00:00 2001
From: Kolodij <dkolodij@gmail.com>
Date: Fri, 14 Nov 2014 11:35:05 -0500
Subject: [PATCH] allows user to choose background attachment container

allows scrolling of modal window with background present.
adds ability to choose both modal container and background container independent of each other.
---
 js/foundation/foundation.reveal.js | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/js/foundation/foundation.reveal.js b/js/foundation/foundation.reveal.js
index 7b7ad004c..17d00e8a6 100644
--- a/js/foundation/foundation.reveal.js
+++ b/js/foundation/foundation.reveal.js
@@ -15,6 +15,7 @@
       close_on_esc: true,
       dismiss_modal_class: 'close-reveal-modal',
       bg_class: 'reveal-modal-bg',
+      bg_root_element: 'body',
       root_element: 'body',
       open: function(){},
       opened: function(){},
@@ -238,10 +239,13 @@
       return base;
     },
 
-    toggle_bg : function (modal, state) {
+    toggle_bg : function (el, modal, state) {
+      var settings = el.data(this.attr_name(true) + '-init') || this.settings,
+            bg_root_element = settings.bg_root_element; // Adding option to specify the background root element fixes scrolling issue
+      
       if (this.S('.' + this.settings.bg_class).length === 0) {
         this.settings.bg = $('<div />', {'class': this.settings.bg_class})
-          .appendTo('body').hide();
+          .appendTo(bg_root_element).hide();
       }
 
       var visible = this.settings.bg.filter(':visible').length > 0;
@@ -276,9 +280,9 @@
           this.locked = false;
         }
         if (animData.pop) {
-          css.top = $(window).scrollTop() - el.data('offset') + 'px';
+          css.top = $(root_element).scrollTop() - el.data('offset') + 'px'; //adding root_element instead of window for scrolling offset if modal trigger is below the fold
           var end_css = {
-            top: $(window).scrollTop() + el.data('css-top') + 'px',
+            top: $(root_element).scrollTop() + el.data('css-top') + 'px', //adding root_element instead of window for scrolling offset if modal trigger is below the fold
             opacity: 1
           };
 
@@ -294,7 +298,7 @@
         }
 
         if (animData.fade) {
-          css.top = $(window).scrollTop() + el.data('css-top') + 'px';
+          css.top = $(root_element).scrollTop() + el.data('css-top') + 'px'; //adding root_element instead of window for scrolling offset if modal trigger is below the fold
           var end_css = {opacity: 1};
 
           return setTimeout(function () {
@@ -326,8 +330,8 @@
     hide : function (el, css) {
       // is modal
       if (css) {
-        var settings = el.data(this.attr_name(true) + '-init');
-        settings = settings || this.settings;
+        var settings = el.data(this.attr_name(true) + '-init') || this.settings,
+            root_element = settings.root_element;
 
         var animData = getAnimationData(settings.animation);
         if (!animData.animate) {
@@ -335,7 +339,7 @@
         }
         if (animData.pop) {
           var end_css = {
-            top: - $(window).scrollTop() - el.data('offset') + 'px',
+            top: - $(root_element).scrollTop() - el.data('offset') + 'px', //adding root_element instead of window for scrolling offset if modal trigger is below the fold
             opacity: 0
           };
 
-- 
2.47.2