如何为我的introjs中的下一步开一个模态？

问题描述

因此IntroJS使用数据介绍和数据步骤属性。

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

 < h1 id =logo data-step =1data-intro =欢迎来到MyApp，您可以开始创建几代专辑！让我们帮助您入门。> 
  

但对于第3步，它是在一个元素上按下时，下一步应该在模态上如果按下步骤3中的元素，则会出现。

我将此作为我的第4步哪个没有工作：

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

现在，当你到达第3步然后按下一步，它会为您提供一个屏幕外的空白框。

我如何获得它专注于那个模态？

解决方案

我们可以用方法 onchange（）监控introJs中步骤的变化（

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中的下一步开一个模态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！