Add option for disable/enable interaction inside examining area

Author: zuta

intro.js

@@ -57,7 +57,9 @@
       /* Scroll to highlighted element? */
       scrollToElement: true,
       /* Set the overlay opacity */
-      overlayOpacity: 0.8
+      overlayOpacity: 0.8,
+      /* Disable an interaction with element? */
+      disableInteraction: false
     };
   }
 
@@ -345,6 +347,11 @@
       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) {
@@ -554,6 +561,12 @@
       //remove old classes
       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);
@@ -718,6 +731,13 @@
     //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,6 +30,15 @@ tr.introjs-showElement > th {
   z-index: 9999999 !important;
 }
 
+.introjs-elementOverlay {
+  z-index: 99999999 !important;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
 .introjs-relativePosition,
 tr.introjs-showElement > td,
 tr.introjs-showElement > th {