如何为我的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-属性放在模态的一部分上，这个属性实际上用于显示弹出窗口，而不是用于隐藏页面的内容，否则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