add appendTo option to attach remodal wrapper to a different DOM elem…

…ent than document.body
ksagala · Apr 25, 2016 · 461d5ec · 461d5ec
1 parent 9dd9ec8
commit 461d5ec
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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));