如何为我的introjs中的下一步触发模态？

因此IntroJS可以处理data-intro和data-step属性。

例如，我的徽标如下所示：

但是对于第3步，它是在一个元素上，当按下时，下一步应该是在按下步骤3中的元素时出现的模态。

我有这个作为我的Step 4 ，它不起作用：

现在，当你到达Step 3然后按next ，它会给你一个空屏幕的空白框。

我如何让它专注于该模式？

Answer 1

我们可以使用方法onchange() 监视 introJs中步骤的更改（ 监视onchange事件的步骤 ）。 在进入步骤4时，我们应该显示模态，并且在输入所有其他步骤时我们应该隐藏它（因为用户可以使用非线性导航，例如可以从步骤4到步骤1）。 我们也应该在oncomplete和exit事件上隐藏模态。

 startIntroButton.on('click', function() { var introJsStarted = introJs().start(); // hiding modal on 'oncomplete' and 'exit' events introJsStarted .oncomplete(function() { $('#add-images-popup').hide(); }).onexit(function(){ $('#add-images-popup').hide(); }).onchange(function(targetElement) { // and show modal on Step 4 if($(targetElement).attr("data-step") == 4) { $('#add-images-popup').show(); } // don't forget to hide modal on other steps if($(targetElement).attr("data-step") != 4) { $('#add-images-popup').hide(); } }); }); 

您应该将第4步的data-属性放在模态的一部分上，该部分实际上用于显示弹出窗口，而不是用于隐藏页面的内容，否则introJs会突出显示浏览器的所有窗口。

  
 
 
 
... 

弹出窗口的介绍会这样：

这是工作小提琴