Intro.js: highlighted area doesn't work as exp

问题:

I'm using the very interesting javascript library intro.js.

However, in my application, the highligted area becomes almost completely white.

I'm guessing that this is some CSS conflict, but what can I do to determine the cause of this problem?

回答1:

Extracted from issue #109 (https://github.com/usablica/intro.js/issues/109):

.introjs-helperLayer {
    background: transparent;
}

.introjs-overlay {
    opacity: 0 !important;
}

.introjs-helperLayer:before {
    opacity: 0;
    content: '';
    position: fixed;
    width: inherit;
    height: inherit;
    border-radius: 0.5em;
    box-shadow: 0 0 0 1000em rgba(0,0,0, .7);
    opacity: 1;
}

.introjs-helperLayer:after {
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    z-index: 1000;
}

This will solve your problem. Hope it helps as it did for me! Shout to @weili1977 and @exoJSON who provided the answer in GitHub.

回答2:

The problem can be fixed by setting absolute position for parent element:

.introjs-fixParent {
  position: absolute !important;
}

回答3:

This is common for users using table row element. I solve mine by adding these lines to css.

.introjs-relativePosition > td { position: relative; }
.introjs-showElement > td { z-index: 9999999 !important; }

回答4:

I set the target element position to absolute (in corresponding CSS) and it works now! see here - http://prntscr.com/1dl0db

回答5:

I didn't see any jsFiddle or any online example of your problem but I try to answer your question in this way:

1. It's seems you're using another UI library like ExtJs or something, make sure you don't have any CSS conflicts.
2. Try to change data-intro and data-step in another element, for example if now you have the data-intro and data-step in the form element, change it to an upper element or a div.

回答6:

In the Introjs.css, setting the z-index to 1 for the introjs-helperlayer class fixes this issue. However, I do not know the full implication of this change.

回答7:

Are you trying to highlight a Table Row ()? If so I experienced this problem too. Someone posted a fix in the github issues section: https://github.com/usablica/intro.js/issues/146

回答8:

I managed to get a useable result with this:

.introjs-helperLayer {
     mix-blend-mode: overlay !important;
}