Multi-step Modal Wizard Plugin For Bootstrap 4 - MultiStep

A jQuery/Bootstrap plugin which dynamically generates and displays a multi-step wizard in a popup window based on Bootstrap's Modal component.

Ideal for complex manuals, tutorials, sign-up forms, payment process, and much more.

See also:

• Simple Step-by-step Wizard Modal For Bootstrap - modal-steps.js

How to use it:

1. Load the necessary JavaScript and CSS files in your Bootstrap project.

<!-- Bootstrap stylesheet -->
<link rel="stylesheet" href="bootstrap.min.css">

<!-- MultiStep stylesheet -->
<link rel="stylesheet" href="dist/css/MultiStep.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="dist/css/MultiStep-theme.min.css">

<!-- jQuery -->
<script src="jquery.min.js"></script>

<!-- Bootstrap JS -->
<script src="bootstrap.min.js"></script>

<!-- MultiStep JS -->
<script src="dist/js/MultiStep.min.js"></script>

2. Create an empty DIV container for the modal wizard.

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

3. Create a trigger button to launch the modal wizard.

<button class="btn btn-primary" data-toggle="modal" data-target="#submitModal">Launch</button>

4. Define your own steps in an array of JS objects as follows:

const mySteps = [{
        content: 'Hello World!',
        label: 'Custom label'
      },{
        content: 'This is a multi-step modal'
      },{
        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',
}]

5. Initialize the modal wizard and done.

$('.modal').MultiStep({
  data: mySteps
});

6. Customize the message displayed in the final step.

$('.modal').MultiStep({
  data: mySteps,
  final: 'Are you sure you want to confirm?',
  finalLabel: 'Complete'
});

7. Set the title of the modal wizard.

$('.modal').MultiStep({
  data: mySteps,
  title: 'Your Title Here'
});

8. Set the modal size.

$('.modal').MultiStep({
  data: mySteps,
  modalSize: 'md'
});

9. Customize the label text.

$('.modal').MultiStep({
  data: mySteps,
  prevText: 'Previous',
  skipText: 'Skip',
  nextText: 'Next',
  finishText: 'Finish'
});

10. Callback functions which will be triggered on close/destroy.

$('.modal').MultiStep({
  data: mySteps,
  onClose: function() {
  },
  onDestroy: function($elem) {
  }
});

Changelog:

2021-05-10

• v0.1.0

---

This awesome jQuery plugin is developed by Kinle. For more Advanced Usages, please check the demo page or visit the official website.