我有一个按钮，单击该按钮后，bootstrap modal 将出现，然后 intro.js 应突出显示该模式。这是我的要求。但它不是那样工作的。
一旦我点击那个按钮，modal 就会出现，但是 intro.js 没有突出显示，如果我按 F12 它就会突出显示。
这是我写的代码:
var introInstance=introJs();
introInstance.onbeforechange(function(targetObj) {
switch(targetElementIndex){
case 1:
$('#productPlanDiv').modal();
break;
};
});
我该如何解决这个问题？谢谢。
最佳答案
答案here @Victor 给出的答案可以帮助您解决这个问题。但是这两个答案并没有解决我的问题所以我把它们合并了。
但是这些回答中有几个问题我觉得很重要；
- 正如@Victor 提到的，introJs 和DOM 必须使用相同的div。但是只有当你真正想要显示模态时，你才应该使用 assing 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 附加到模态。到最近的容器，当什么都找不到时，会导致错误/错误。
- 我遇到的另一件重要的事情是当你给你的模态一个高的
z-index值时你也应该给你的模态的元素比如 select2-dropdownlist 更高的z-index值(value)。或者您应该重置模态的z-index值。 select2-dropdownlist 中的某些元素，如select2-search__field、select2-results__options等，将无法理解您赋予的z-index值模态。因为它们的z-index值将低于模态本身，所以这些元素永远不会显示在模态上。我的建议是重置模态z-index值以防止出现这种情况。
关于javascript - 如何使用 intro.js 突出显示 Bootstrap 模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25436147/