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

Question

所以 IntroJS 使用 data-intro 和 data-step 属性。

例如我的徽标如下所示：

<h1 id="logo" data-step="1" data-intro="Welcome to MyApp, where you can start creating an album for generations! Let us help you get started.">

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

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

<div class="popup" id="add-images-step-1" data-step="4" data-intro="GETS TO UPLOADING">

现在，当您到达 Step 3 并按下 next 时，它会为您提供一个屏幕外的空白框。

如何让它专注于该模式？

Answer 1

我们可以使用方法 onchange() (monitor steps on onchange event) 监控 introJs 中步骤的变化。在进入第 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- 属性放在模态部分，它实际上是用于显示弹出窗口 window 而不是用于隐藏页面内容，否则 introJs 将突出显示所有 window 你的浏览器。

  <div id="add-images-popup" class="modal" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content" data-step="4" data-intro="GETS TO UPLOADING">
                <div class="modal-header">...

弹出窗口的介绍 window 看起来像这样：

Here is working fiddle

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

How do I fire a modal for the next step in my introjs?

javascript

jquery

popup

modal-dialog

intro.js