如何使用intro.js突出显示引导模态 [英] How to highlight bootstrap modal with intro.js
问题描述
我有一个按钮，一旦单击该按钮，就会出现bootstrap modal，然后intro.js应该突出显示该模式.这是我的要求.但这不是那样的.
I have a button, once I click on that button bootstrap modal will appear and then intro.js should highlight that modal. This is my requirement. But it's not working like that.
一旦我单击该按钮，就会出现modal，但是intro.js不会突出显示，如果按F12则会突出显示.
Once I click on that button modal is appearing but intro.js is not highlighting, if I press F12 it's highlighting.
这是我编写的代码:
var introInstance=introJs();
introInstance.onbeforechange(function(targetObj) {
switch(targetElementIndex){
case 1:
$('#productPlanDiv').modal();
break;
};
});
我该如何解决?谢谢.
推荐答案
The answer here and the answer @Victor gave could help you to solve this problem. But these two answers didn't solve my problem so I merged them.
但是要回答这些问题，我认为很重要；
But there are several issues for these answer to mention that I think is important;
- 正如@Victor所提到的，introJ和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附加到模态.相反，introJ总是会尝试自行附加自身到最接近的容器，如果什么也找不到，将导致错误/错误.
Like I tried to show in my JavaScript code, you should only append introJs to modal when your data-steps are defined at your modal's div. The other way, introJs will always tries to append itself to the closest container and when find nothing, it will cause error/bugs.
- 我遇到的另一件重要的事情是，当为模态赋予较高的
z-index值时，还应为模态的项赋予较高的z-index值，例如select2-dropdownlist.或者您应该重置模态的z-index值. select2-下拉列表中的某些项目，例如select2-search__field，select2-results__options等，将无法理解您为模态赋予的z-index值.并且由于它们的z-index值将低于模态本身，因此这些项目永远不会在模态上显示.我的建议是重置模式z-index值以防止这种情况.
- The other important thing I encounter is when you give your modal a high
z-indexvalue you should also give your modal's item such as select2-dropdownlist higherz-indexvalue. Or you should reset modal'sz-indexvalue. Some of the items in select2-dropdownlist likeselect2-search__field,select2-results__optionsetc. will not understand whatz-indexvalue you give to modal. And because theirz-indexvalue will be lower than the modal itself these items never be shown on modal. My suggestion is resetting modalz-indexvalue to prevent this.
这篇关于如何使用intro.js突出显示引导模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
