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

这篇关于如何在我的 introjs 中为下一步触发模态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！