在我的自我介绍的下一步，我该如何启动模式呢？

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() (监视onchange事件的步骤)方法来监控导入We中步骤的变化。在进入第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-属性放在模式的一部分，这实际上是用于显示弹出窗口，而不是隐藏页面的内容，否则内嵌is将突出显示浏览器的所有窗口。

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

弹出窗口的介绍应该是这样的：

​

这是工作小提琴