intro.js
/**
      * Add overlay layer to the page.
      * The overlay gets inserted right after the targetElement so we can avoid new stacking contexts set by parents
      * of the targetElement
      *
      * @api private
      * @method _addOverlayLayer
      * @param {HTMLElement} targetElement the element to highlight for this step
      */
Add overlay layer to the page.
The overlay gets inserted right after the targetElement so we can avoid new stacking contexts set by parents
of the targetElement

@api private
@method _addOverlayLayer
@param {HTMLElement} targetElement the element to highlight for this step
Add overlay layer to the page . The overlay gets inserted right after the targetElement so we can avoid new stacking contexts set by parents of the targetElement @api private @method _addOverlayLayer @param { HTMLElement } targetElement the element to highlight for this step
function _createOrUpdateOverlayLayer(targetElement) {
        var overlayLayer = this._rootElement.querySelector('.introjs-overlay');
        var styleText = '';
        var rootElementIsBody = this._rootElement.tagName.toLowerCase() === 'body';
        var targetElementIsBody = targetElement.tagName.toLowerCase() === 'body';
        if (overlayLayer === null) {
            overlayLayer = document.createElement('div');
            overlayLayer.className = 'introjs-overlay';
            if (rootElementIsBody) {
                styleText += 'top: 0; bottom: 0; left: 0; right: 0; position: fixed;';
                overlayLayer.setAttribute('style', styleText);
            } else {
                var elementPosition = _getOffset(this._rootElement);
                if (elementPosition) {
                    styleText += 'width: ' + elementPosition.width + 'px; ' +
                                 'height:' + elementPosition.height + 'px; ' +
                                 'top:' + elementPosition.top + 'px; ' +
                                 'left: ' + elementPosition.left + 'px;';
                    overlayLayer.setAttribute('style', styleText);
                }
            }
            if (this._options.exitOnOverlayClick) {
                overlayLayer.onclick = function() {
                    _exitIntro.call(this);
                }.bind(this);
            }
            setTimeout(function() {
                styleText += 'opacity: ' + this._options.overlayOpacity + ';';
                overlayLayer.setAttribute('style', styleText);
            }.bind(this), 10);
        }
        if (targetElementIsBody) {
            targetElement.appendChild(overlayLayer);
        } else {
            targetElement.parentNode.appendChild(overlayLayer);
        }
    }
function _createOrUpdateOverlayLayer ( targetElement ) { var overlayLayer = this . _rootElement . querySelector ( '.introjs-overlay' ) ; var styleText = '' ; var rootElementIsBody = this . _rootElement . tagName . toLowerCase ( ) === 'body' ; var targetElementIsBody = targetElement . tagName . toLowerCase ( ) === 'body' ; if ( overlayLayer === null ) { overlayLayer = document . createElement ( 'div' ) ; overlayLayer . className = 'introjs-overlay' ; if ( rootElementIsBody ) { styleText += 'top: 0; bottom: 0; left: 0; right: 0; position: fixed;' ; overlayLayer . setAttribute ( 'style' , styleText ) ; } else { var elementPosition = _getOffset ( this . _rootElement ) ; if ( elementPosition ) { styleText += 'width: ' + elementPosition . width + 'px; ' + 'height:' + elementPosition . height + 'px; ' + 'top:' + elementPosition . top + 'px; ' + 'left: ' + elementPosition . left + 'px;' ; overlayLayer . setAttribute ( 'style' , styleText ) ; } } if ( this . _options . exitOnOverlayClick ) { overlayLayer . onclick = function ( ) { _exitIntro . call ( this ) ; } . bind ( this ) ; } setTimeout ( function ( ) { styleText += 'opacity: ' + this . _options . overlayOpacity + ';' ; overlayLayer . setAttribute ( 'style' , styleText ) ; } . bind ( this ) , 10 ) ; } if ( targetElementIsBody ) { targetElement . appendChild ( overlayLayer ) ; } else { targetElement . parentNode . appendChild ( overlayLayer ) ; } }
Add overlay layer to the page.
Add overlay layer to the page .
// Create overlay layer if not existing yet // set css class name // check if the target element is body, we should calculate the size of overlay layer in a better way // set overlay layer position