From 38f07c78b638df965af7c9673d70246a6c110fb9 Mon Sep 17 00:00:00 2001 From: Zenoo Date: Sun, 4 Jul 2021 23:35:33 +0200 Subject: [PATCH] feat: Add new option to append the backdrop to any element. FIxes #260 --- README.md | 7 ++++--- jquery.modal.js | 11 ++++++----- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 56c1a1f..9d20dd9 100644 --- a/README.md +++ b/README.md @@ -190,9 +190,10 @@ $.modal.defaults = { // HTML appended to the default spinner during AJAX requests. spinnerHtml: '
', - 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 ) }; ``` diff --git a/jquery.modal.js b/jquery.modal.js index 7e62a4d..bd80565 100644 --- 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 = $('
').appendTo(this.$body); + this.options.backdropParent.css('overflow','hidden'); + this.$blocker = $('
').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