Javascript 在我的介绍中，如何为下一步启动模态？

因此IntroJS使用

数据简介

和

数据步骤

属性

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

<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

并按

下一步

时，屏幕上会显示一个空白的白色框

---

如何让它专注于这个模式？

我们可以使用方法

onchange（）

（）监视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的

数据-

属性放置在模式部分，该部分实际上用于显示弹出窗口，而不是隐藏页面内容，否则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">...

...

弹出窗口的简介如下所示：

---

您是否有机会展示整个HTML文件，或者最好将示例放在JSFIDLE上？非常感谢。乍一看，这正是我想要的。我会测试它，如果我有任何问题，会告诉你。

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