如何为我的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

我们可以使用方法监视 introJs中步骤的更改onchange()(监视onchange事件的步骤).在进入步骤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">...

弹出窗口的介绍会这样:

这是工作小提琴