Change implementation of disable interaction

Now uses a div that is child of the body element
(not of the target element)

Author: bostikforever

intro.js

@@ -341,17 +341,18 @@
       helperLayer.parentNode.removeChild(helperLayer);
     }
 
+    //remove disableInteractionLayer
+    var disableInteractionLayer = targetElement.querySelector('.introjs-disableInteraction');
+    if(disableInteractionLayer){
+      disableInteractionLayer.parentNode.removeChild(disableInteractionLayer);
+    }
+    
     //remove intro floating element
     var floatingElement = document.querySelector('.introjsFloatingElement');
     if (floatingElement) {
       floatingElement.parentNode.removeChild(floatingElement);
     }
 
-    //remove element overlay
-    if (this._options.disableInteraction === true) {
-      document.querySelector('.introjs-elementOverlay').remove();
-    }
-
     //remove `introjs-showElement` class from the element
     var showElement = document.querySelector('.introjs-showElement');
     if (showElement) {
@@ -510,6 +511,16 @@
     }
   }
 
+  function _disableInteraction(){
+    disableInteractionLayer = document.querySelector('.introjs-disableInteraction');
+    if (disableInteractionLayer === null){
+      disableInteractionLayer = document.createElement('div');
+      disableInteractionLayer.className = 'introjs-disableInteraction';
+      this._targetElement.appendChild(disableInteractionLayer);
+    }
+    _setHelperLayerPosition.call(this, disableInteractionLayer);
+
+  }
   /**
    * Show an element on the page
    *
@@ -562,11 +573,6 @@
       var oldShowElement = document.querySelector('.introjs-showElement');
       oldShowElement.className = oldShowElement.className.replace(/introjs-[a-zA-Z]+/g, '').replace(/^\s+|\s+$/g, '');
 
-      //remove element overlay
-      if (this._options.disableInteraction === true) {
-        document.querySelector('.introjs-elementOverlay').remove();
-      }
-
       //we should wait until the CSS3 transition is competed (it's 0.3 sec) to prevent incorrect `height` and `width` calculation
       if (self._lastShowElementTimer) {
         clearTimeout(self._lastShowElementTimer);
@@ -617,6 +623,7 @@
         bulletsLayer.style.display = 'none';
       }
 
+
       var ulContainer = document.createElement('ul');
 
       for (var i = 0, stepsLength = this._introItems.length; i < stepsLength; i++) {
@@ -655,6 +662,7 @@
         helperNumberLayer.innerHTML = targetElement.step;
         helperLayer.appendChild(helperNumberLayer);
       }
+
       tooltipLayer.appendChild(arrowLayer);
       helperLayer.appendChild(tooltipLayer);
 
@@ -714,6 +722,10 @@
       _placeTooltip.call(self, targetElement.element, tooltipLayer, arrowLayer, helperNumberLayer);
     }
 
+    //disable interaction
+    if (this._options.disableInteraction === true){
+      _disableInteraction.call(self);
+    }
     if (this._currentStep == 0 && this._introItems.length > 1) {
       prevTooltipButton.className = 'introjs-button introjs-prevbutton introjs-disabled';
       nextTooltipButton.className = 'introjs-button introjs-nextbutton';
@@ -731,13 +743,6 @@
     //Set focus on "next" button, so that hitting Enter always moves you onto the next step
     nextTooltipButton.focus();
 
-    //add inner div to prevent posibility interact with element (transparent overlay)
-    if (this._options.disableInteraction === true) {
-      var elementOverlay = document.createElement('div');
-      elementOverlay.className = 'introjs-elementOverlay';
-      targetElement.element.appendChild(elementOverlay);
-    }
-
     //add target element position style
     targetElement.element.className += ' introjs-showElement';
 

introjs.css

@@ -30,13 +30,9 @@ tr.introjs-showElement > th {
   z-index: 9999999 !important;
 }
 
-.introjs-elementOverlay {
+.introjs-disableInteraction {
   z-index: 99999999 !important;
   position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
 }
 
 .introjs-relativePosition,