MDL-70352 core: attach modal to a specific element
authorDmitrii Metelkin <dmitriim@catalyst-au.net>
Mon, 30 Nov 2020 04:26:14 +0000 (15:26 +1100)
committerDmitrii Metelkin <dmitriim@catalyst-au.net>
Thu, 31 Dec 2020 03:02:20 +0000 (14:02 +1100)
lib/amd/build/modal.min.js
lib/amd/build/modal.min.js.map
lib/amd/build/modal_backdrop.min.js
lib/amd/build/modal_backdrop.min.js.map
lib/amd/src/modal.js
lib/amd/src/modal_backdrop.js

index 91677e8..dfa48ea 100644 (file)
Binary files a/lib/amd/build/modal.min.js and b/lib/amd/build/modal.min.js differ
index e330a08..0e682d0 100644 (file)
Binary files a/lib/amd/build/modal.min.js.map and b/lib/amd/build/modal.min.js.map differ
index 1778e05..5ebc430 100644 (file)
Binary files a/lib/amd/build/modal_backdrop.min.js and b/lib/amd/build/modal_backdrop.min.js differ
index df2f559..057e7c1 100644 (file)
Binary files a/lib/amd/build/modal_backdrop.min.js.map and b/lib/amd/build/modal_backdrop.min.js.map differ
index 118d679..ea2defa 100644 (file)
@@ -102,6 +102,8 @@ define([
         this.bodyJS = null;
         this.footerJS = null;
         this.modalCount = modalCounter++;
+        this.attachmentPoint = document.createElement('div');
+        document.body.append(this.attachmentPoint);
 
         if (!this.root.is(SELECTORS.CONTAINER)) {
             Notification.exception({message: 'Element is not a modal container'});
@@ -648,7 +650,7 @@ define([
      * @returns {jQuery}
      */
     Modal.prototype.getAttachmentPoint = function() {
-        return $(Fullscreen.getElement() || document.body);
+        return $(Fullscreen.getElement() || this.attachmentPoint);
     };
 
     /**
@@ -753,6 +755,7 @@ define([
         this.hide();
         this.root.remove();
         this.root.trigger(ModalEvents.destroyed, this);
+        this.attachmentPoint.remove();
     };
 
     /**
@@ -797,7 +800,11 @@ define([
             }
 
             if (e.keyCode == KeyCodes.escape) {
-                this.hide();
+                if (this.removeOnClose) {
+                    this.destroy();
+                } else {
+                    this.hide();
+                }
             }
         }.bind(this));
 
index 1cbc1fd..7cdd2d1 100644 (file)
@@ -37,6 +37,8 @@ define(['jquery', 'core/templates', 'core/notification', 'core/fullscreen'],
     var ModalBackdrop = function(root) {
         this.root = $(root);
         this.isAttached = false;
+        this.attachmentPoint = document.createElement('div');
+        document.body.append(this.attachmentPoint);
 
         if (!this.root.is(SELECTORS.ROOT)) {
             Notification.exception({message: 'Element is not a modal backdrop'});
@@ -59,7 +61,7 @@ define(['jquery', 'core/templates', 'core/notification', 'core/fullscreen'],
       * @returns {jQuery}
       */
      ModalBackdrop.prototype.getAttachmentPoint = function() {
-         return $(Fullscreen.getElement() || document.body);
+         return $(Fullscreen.getElement() || this.attachmentPoint);
      };
 
     /**
@@ -155,6 +157,7 @@ define(['jquery', 'core/templates', 'core/notification', 'core/fullscreen'],
      */
     ModalBackdrop.prototype.destroy = function() {
         this.root.remove();
+        this.attachmentPoint.remove();
     };
 
     return ModalBackdrop;