Question

我们正在使用intro.js来实施应用程序导览。在巡演之间，我突出显示bootstrap modal，但元素没有出现，如下图所示：

enter image description here

它只发生在modal，当我尝试突出显示其他元素时它工作正常，如下图：

enter image description here

任何人都可以帮助我吗？感谢。

Answer 1

我已将其添加到我的css中，并将所有模式元素移动到 <body>的末尾而不是任何子元素，或者所有你＆＃39;我会得到奇怪的定位。

.introjs-fixParent.modal,
.introjs-fixParent.modal-dialog {
    position: relative !important;
}

修正了我的模态：

$(document).ready(function(){
    $('div.modal').appendTo('body');
});

在intro.js版本1.1.1上测试

Answer 2

IntroJs和DOM必须使用相同的div。但是你应该只在实际想要显示模态时才使用introJs来模态div。让我们认为你有4个步骤，第3步和第4步显示你的模态元素如下：

HTML代码：

<html>
<style>
    .modal { 
        z-index: 999999997 !important; 
    }
    .modal .introjs-fixedTooltip { 
        z-index: 99999998 !important; /*I give less value to this one. The other way introJs always blocks my modals*/
    }
    .modal .introjs-showElement { 
        z-index: 999999999 !important; 
        }
</style>

<body>
    <div id="some-div" data-step="1" data-intro="Let's do this!">
        <p>some meaningful workk</p>
    </div>
    <div id="some-other-div" data-step="2" data-intro="You can do it!">
        <p>this is very important text</p>
    </div>

    <div id="yourmodal" class="modal fade" role="dialog" aria-hidden="true">ü
        <form id="valuable-info" data-step="3" data-intro="use here to give info">
            important labels, textboxs, lists etc...
            <button id="click-here" data-step="4" data-intro="click here to click">
                click
            <button>
        </form> 
    </div>

    <button id="introJs-button">IntroJS</button>
</body>

JS代码：

$('#introJs-button').on('click', function() {
    var intro = introJs();

    intro.onchange(function (targetElement){
        if (targetElement.attributes["data-step"].value === "3" && targetElement.attributes["data-step"].value === "4") {
            var closestContainer = $(targetElement).closest('div.modal').prop('id');
            $('.introjs-overlay, .introjs-helperLayer, .introjs-tooltipReferenceLayer, .introjs-fixedTooltip').appendTo('#' + closestContainer);
        }
        else {              
            $('.introjs-overlay, .introjs-helperLayer, .introjs-tooltipReferenceLayer, .introjs-fixedTooltip').appendTo('body');
        }
    });
})

就像我试图在我的JavaScript代码中显示的那样，当你的模态的div中定义了数据步骤时，你应该只将introJs附加到模态。另一方面，introJs将总是试图追加自己到最近的容器，当什么都没找到时，它会导致错误/错误。

当你给你的模态一个高z-index值时，你也应该给你的模态项目，例如select2-dropdownlist更高z-index值。或者您应该重置模态的z-index值。 select2-dropdownlist中的某些项目（如select2-search__field，select2-results__options等）无法理解您为模态提供的z-index值。并且因为它们的z-index值将低于模态本身，所以这些项目永远不会显示在模态上。我的建议是重置模态z-index值以防止这种情况发生。

Intro.js样式没有正确显示

2 个答案: