javascript - 如何在我的 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 步中的元素时出现的模态上。

我将此作为我的第 4 步，但它不起作用:

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

现在，当您到达第 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- 属性放在实际上用于显示弹出窗口而不是隐藏页面内容的模态部分，否则 introJs 会突出显示浏览器的所有窗口。

  <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">...

弹出窗口的介绍看起来是这样的:

Here is working fiddle