feat: Add new option to append the backdrop to any element. FIxes kylefox#260

Zenoo · Zenoo · commit 38f07c78b638 · 2021-07-04T23:35:33.000+02:00
diff --git a/README.md b/README.md
@@ -190,9 +190,10 @@ $.modal.defaults = {
   // HTML appended to the default spinner during AJAX requests.
   spinnerHtml: '<div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div>',
 
-  showSpinner: true,      // Enable/disable the default spinner during AJAX requests.
-  fadeDuration: null,     // Number of milliseconds the fade transition takes (null means no transition)
-  fadeDelay: 1.0          // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)
+  showSpinner: true,         // Enable/disable the default spinner during AJAX requests.
+  fadeDuration: null,        // Number of milliseconds the fade transition takes (null means no transition)
+  fadeDelay: 1.0,            // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)
+  backdropParent: $('body')  // Blocker parent element. (defaults to the <body>)
 };
 ```
 
diff --git a/jquery.modal.js b/jquery.modal.js
@@ -114,8 +114,8 @@
 
     block: function() {
       this.$elm.trigger($.modal.BEFORE_BLOCK, [this._ctx()]);
-      this.$body.css('overflow','hidden');
-      this.$blocker = $('<div class="' + this.options.blockerClass + ' blocker current"></div>').appendTo(this.$body);
+      this.options.backdropParent.css('overflow','hidden');
+      this.$blocker = $('<div class="' + this.options.blockerClass + ' blocker current"></div>').appendTo(this.options.backdropParent);
       selectCurrent();
       if(this.options.doFade) {
         this.$blocker.css('opacity',0).animate({opacity: 1}, this.options.fadeDuration);
@@ -127,12 +127,12 @@
       if (!now && this.options.doFade)
         this.$blocker.fadeOut(this.options.fadeDuration, this.unblock.bind(this,true));
       else {
-        this.$blocker.children().appendTo(this.$body);
+        this.$blocker.children().appendTo(this.options.backdropParent);
         this.$blocker.remove();
         this.$blocker = null;
         selectCurrent();
         if (!$.modal.isActive())
-          this.$body.css('overflow','');
+          this.options.backdropParent.css('overflow','');
       }
     },
 
@@ -212,7 +212,8 @@
     showSpinner: true,
     showClose: true,
     fadeDuration: null,   // Number of milliseconds the fade animation takes.
-    fadeDelay: 1.0        // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)
+    fadeDelay: 1.0,       // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)
+    backdropParent: $('body') // Blocker parent
   };
 
   // Event constants
