From 461d5ec307a3214e0d2c1427b613178236ed9293 Mon Sep 17 00:00:00 2001
From: Deyna Cegielski <deyna@mintsrc.co.uk>
Date: Mon, 25 Apr 2016 10:50:40 +0100
Subject: [PATCH] add appendTo option to attach remodal wrapper to a different
 DOM element than document.body

---
 src/remodal.js       | 12 +++++++++---
 test/remodal.html    |  6 ++++++
 test/remodal_test.js | 24 +++++++++++++++++++++++-
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/remodal.js b/src/remodal.js
index 981cea2..b1fe1d3 100644
--- a/src/remodal.js
+++ b/src/remodal.js
@@ -70,7 +70,8 @@
     closeOnCancel: true,
     closeOnEscape: true,
     closeOnOutsideClick: true,
-    modifier: ''
+    modifier: '',
+    appendTo: null
   }, global.REMODAL_GLOBALS && global.REMODAL_GLOBALS.DEFAULTS);
 
   /**
@@ -497,6 +498,7 @@
    */
   function Remodal($modal, options) {
     var $body = $(document.body);
+    var $appendTo = $body;
     var remodal = this;
 
     remodal.settings = $.extend({}, DEFAULTS, options);
@@ -505,9 +507,13 @@
 
     remodal.$overlay = $('.' + namespacify('overlay'));
 
+    if (remodal.settings.appendTo !== null && remodal.settings.appendTo.length) {
+      $appendTo = $(remodal.settings.appendTo);
+    }
+
     if (!remodal.$overlay.length) {
       remodal.$overlay = $('<div>').addClass(namespacify('overlay') + ' ' + namespacify('is', STATES.CLOSED)).hide();
-      $body.append(remodal.$overlay);
+      $appendTo.append(remodal.$overlay);
     }
 
     remodal.$bg = $('.' + namespacify('bg')).addClass(namespacify('is', STATES.CLOSED));
@@ -527,7 +533,7 @@
         namespacify('is', STATES.CLOSED))
       .hide()
       .append(remodal.$modal);
-    $body.append(remodal.$wrapper);
+    $appendTo.append(remodal.$wrapper);
 
     // Add the event listener for the close button
     remodal.$wrapper.on('click.' + NAMESPACE, '[data-' + PLUGIN_NAME + '-action="close"]', function(e) {
diff --git a/test/remodal.html b/test/remodal.html
index f42d1bc..6540061 100644
--- a/test/remodal.html
+++ b/test/remodal.html
@@ -58,5 +58,11 @@
 <div class="remodal" data-remodal-id="!modal4/test">
   <a data-remodal-action="close" class="remodal-close"></a>
 </div>
+
+<div data-remodal-id="modal5">
+  <a data-remodal-action="close" class="remodal-close"></a>
+</div>
+
+<div id="target"></div>
 </body>
 </html>
diff --git a/test/remodal_test.js b/test/remodal_test.js
index fbaeba0..fbeb54b 100644
--- a/test/remodal_test.js
+++ b/test/remodal_test.js
@@ -311,7 +311,8 @@
       closeOnCancel: false,
       closeOnEscape: false,
       closeOnOutsideClick: false,
-      modifier: 'without-animation with-test-class'
+      modifier: 'without-animation with-test-class',
+      appendTo: null
     }, 'options are correctly parsed');
   });
 
@@ -431,4 +432,25 @@
     remodal.open();
   });
 
+  QUnit.asyncTest('"appendTo" option', function(assert) {
+    var $elem = $('[data-remodal-id=modal5]');
+    var $target = $('#target');
+    var remodal = $elem.remodal({
+      appendTo: $target
+    });
+
+    $document.one('opened', '[data-remodal-id=modal5]', function() {
+      var $wrapper = $('[data-remodal-id=modal5]').parent();
+      var $appendTo = $wrapper.parent();
+
+      assert.equal($appendTo.attr('id'), 'target', 'modal appended to target');
+
+      remodal.close();
+
+      QUnit.start();
+    });
+
+    remodal.open();
+  });
+
 }(window.jQuery || window.Zepto, location, document));