Intro.js样式没有正确显示

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

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

谁能帮我？ 谢谢。

Answer 1

我已经修复了它，将它添加到我的css中，并将所有模态元素移动到 的末尾而不是任何子元素，否则所有你都会得到奇怪的定位。

 .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代码：

    
 
some meaningful workk
 
 
 
this is very important text
 
 
ü 
 important labels, textboxs, lists etc...  click  
 
 IntroJS  

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-search__field等，将无法理解你给modal的z-index值。 并且因为它们的z-index值将低于模态本身，所以这些项永远不会在模态上显示。 我的建议是重置模态z-index值以防止这种情况。