如何在我的 introjs 中为下一步触发模态?

所以 IntroJS 使用 data-intro 和 data-step 属性.

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

<h1 id="logo" data-step="1" data-intro="欢迎来到MyApp，在这里您可以开始为世代创建相册！让我们帮助您开始.">

但是对于第 3 步，它是在按下时在一个元素上，下一步应该在第 3 步中的元素被按下时出现的模式上.

我将这个作为我的 Step 4 不起作用:

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

现在，当您到达 Step 3 并按 next 时，它会给您一个屏幕外的空白框.

如何让它专注于那个模式?

解决方案

我们可以通过方法 onchange() (

So IntroJS works off of the data-intro and data-step attributes.

So for instance my logo looks like this:

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

But for step 3 it is on an element that when pressed, the next step should be on the modal that would appear if the element in Step 3 was pressed.

I have this as my Step 4 which doesn't work:

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

Right now, when you reach Step 3 and press next, it gives you an empty white box that is off-screen.

How do I get it to focus on that modal?

解决方案

We can monitor changing of steps in introJs with method onchange() (monitor steps on onchange event). On entering step 4 we should show the modal, and on entering all other steps we should hide it (cause user can use non-linear navigation and e.g. can go from step 4 to step 1). Also we should hide modal on oncomplete and exit events.

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();
        }
    });
});

You should place Step 4's data- attributes on the part of the modal which is actually for displaying popup window and not for hiding content of the page otherwise introJs would highlight all the window of your browser.

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

Intro of popup window would look this way:

Here is working fiddle