Question

我有一个按钮，一旦我点击该按钮bootstrap modal将出现，然后intro.js应该突出显示该模态。这是我的要求。但它不是那样的。

点击该按钮modal后，intro.js未突出显示，如果我按F12突出显示。

这是我写的代码：

var introInstance=introJs();
introInstance.onbeforechange(function(targetObj) {
  switch(targetElementIndex){
    case 1:
      $('#productPlanDiv').modal();
      break;
  };
});

我该如何解决这个问题？感谢。

Answer 1

答案here和@Victor给出的答案可以帮助您解决这个问题。但这两个答案并没有解决我的问题所以我合并了它们。

但是，这些答案有几个问题，我认为这很重要;

正如@Victor所提到的，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值以防止这种情况发生。

Answer 2

由于bootstrap中的所有JavaScript插件都需要jQuery，因此当显示模式时，您可以使用事件侦听器自动触发它：

$('#my-modal').on('shown', function(){
  introJs().start();
});

Answer 3

网上的解决方案都没有解决我的问题。

但我提出了这个解决方案：

/*fix interactions with modal BS3, take this on CSS file*/
.modal { z-index:999999997 !important; }
.modal .introjs-fixedTooltip { z-index: 999999998 !important; }
.modal .introjs-showElement { z-index: 999999999 !important; }


//Use this class and make sure that the modal has an ID
//introJs-Bs3-modal
//The introJs have a problem with DOM positioning and reading. It is mandatory for DIVs to work within the same element as modal.

$('.introJs-Bs3-modal').on('click', function() {
    var containerClosest = $(this).closest('div.modal').prop('id');
    setTimeout(function(){
        $('.introjs-overlay, .introjs-helperLayer, .introjs-tooltipReferenceLayer').appendTo('#'+containerClosest);
        }, 0);
});

如何使用intro.js突出显示bootstrap模式

3 个答案: