Bootstrap многоступенчатая форма

Question

Я просто новичок в Bootstrap и только учусь этому. Я столкнулся с этой многошаговой формой на модале. Я могу редактировать элементы на нем, но я хочу удалить многошаговую форму из модальной, это довольно сложно для меня, так как она имеет jQuery, и я хотел бы выделить отдельное время для изучения jQuery. Заранее спасибо.

Это код HTML

    <!-- HEADER -->
    <!-- <div id="header_wrap" class="outer">
        <header class="inner">
            <h1 id="project_title"><a href="#">Multi-step Modal Wizard Example</a></h1>
        </header>
    </div> -->

    <!-- MAIN CONTENT -->
    <div id="main_content_wrap" class="outer">
        <section id="main_content" class="inner">
            <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#submitModal">Open modal</button>
        </section>
    </div>

    <div id="submitModal" class="multi-step">
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script type="text/javascript" src="dist/js/MultiStep.min.js"></script>



    <script type="text/javascript">
         $(document).ready(function() {
        $('.modal').MultiStep({
            title:'Let your potential be seen',
            data:[{
                content:'<center>Welcome and please fill up the following questions for better job results</center>',
                label:'Welcome!!!'
            },{
                content:`<center><button type="button" class="btn btn-info">I have a work experience</button>
                    <button type="button" class="btn btn-info">I am a student/ Fresh graduate</button></center>

                    <br/>Currently Residing In<span><font color = "red">*</font></span><br />

                    <select name="nationality" class="form-control"><option value="nationality">Philippine</option> 
                    <option value="volvo">Afghan</option>          <option value="volvo">Albanian</option>
 </select>

                    <br/>Nationality<span><font color = "red">*</font></span><br />

                    <option value="audi">Bahraini</option>         <option value="volvo">Bangladeshi</option>
                    </select>

                    <br/>Expected Monthly Salary<span><font color = "red">*</font></span><br />

                    <select name="MSE" class="form-control"><option value="MSE">PHP</option> 
                    <option value="volvo">AED</option>          <option value="volvo">AFN</option>
                    <option value="audi">BHD</option>         <option value="volvo">BIF</option>
                    </select>

                    `
                // <input type="nationality" class="form-control" placeholder="Philippines">
            },{
                content:`You can have skip options`,
                skip:true
            },{
                content:`<small>You can include html content as well!</small><br><br>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                  </div>
                `,
                skip:true
            },{
                content:`This is the end<br>Hold your breath and count to ten`,
            }],
            final:'You can have your own final message',
            modalSize:'lg'
        });
    });

</script>
</body>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>```

Answer 1

Вы можете использовать метод .dialog и сразу добавить все HTML, что вы добавили для массива данных MultiStep (значение содержимого объекта).

Answer 2

Если вы хотите удалить шаги, вы можете просто удалить элементы из атрибута данных.

Например, удалить

{
    content:`You can have skip options`,
    skip:true
}

Чтобы полностью удалить этот шаг. То же самое касается добавления дополнительных шагов. Вы можете просто создать новые записи для атрибута данных (который является массивом).