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

问题

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:

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; }

回答3:

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

回答4:

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

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

回答5:

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

It's seems you're using another UI library like ExtJs or something, make sure you don't have any CSS conflicts.
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;
}

来源：https://stackoverflow.com/questions/15967289/intro-js-highlighted-area-doesnt-work-as-expected

标签

javascript

html5

intro.js