Question

我正在使用introjs，但我在网站的某些页面有问题。我有一个弹出窗口出现在页面前面，但是当我调用前奏并指向弹出窗口中的元素时，背景中的图像出现在弹出窗口上方（见图像），没有介绍弹出窗口显示正常。在其他页面中，我也这样做，但一切都很好

我的弹出窗口的css是这样的：

#popup_modal {
    /* position: fixed; */
    position: absolute !important;
    height: 100%;
    top: 50px;
    width: 98%;
    left: 1%;
    z-index: 99999999;
    overflow: hidden;
}
#popup {
    padding: 20px;
    border: 1px solid #007793;
    width: 470px !important;
    min-height: 162px;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    background-color: #F6F6F6;
    border-radius: 4px;
    box-shadow: 5px 5px 20px #666;
}

编辑：

#popup_modal {
    /* position: fixed; */
    position: absolute !important;
    height: 100%;
    top: 50px;
    width: 98%;
    left: 1%;
    z-index: 9999 !important;
    overflow: hidden;
}
#popup {
    padding: 20px;
    border: 1px solid #007793;
    width: 470px !important;
    min-height: 162px;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    background-color: #F6F6F6;
    border-radius: 4px;
    box-shadow: 5px 5px 20px #666;
}

Introjs css：

.introjs-helperLayer {
    position: absolute;
    z-index: 9999998;
    background-color: #FFF;
    background-color: rgba(255,255,255,.9);
    border: 1px solid #777;
    border: 1px solid rgba(0,0,0,.5);
    border-radius: 4px;
    box-shadow: 0 2px 15px rgba(0,0,0,.4);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

Answer 1

尝试在position: relative的CSS中添加#popup以强制计算分层：

＆＃13;

#popup {
    padding: 20px;
    border: 1px solid #007793;
    width: 470px !important;
    min-height: 162px;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    background-color: #F6F6F6;
    border-radius: 4px;
    box-shadow: 5px 5px 20px #666;
    z-index: 999999999;
    position: relative; // Default value is "static" but "relative" will cause layering to occur
}

＆＃13;

Z-index值通常在静态定位的元素中被忽略，当你有其他元素使用不同类型的定位时会导致奇怪的分层。

Answer 2

就我而言，我有这个

在侧边栏的li元素中添加内联样式（style =“background-color：＃347D87！important;”）并在原始introjs.css文件中添加属性'position：absolute'的类'introjs-fixedTooltip'IT工作!!!

我花了10多个小时处理这个问题，我找不到更好的解决方案。

更新： https://github.com/usablica/intro.js/issues/532

Answer 3

只需使用此CSS即可：

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

introjs-fixPrent放置在该元素的顶级父元素上，因此，请使用setTimeOut函数前进。

introjs：当使用介绍时，背景图像出现在弹出窗口

3 个答案: