Multi-step Modal Wizard Plugin With jQuery And Bootstrap - Multi-Step Modal

Multi-Step Modal is a jQuery plugin which allows you to show a step-by-step wizard with a progress bar in the Bootstrap modals. Useful to display your form wizard in an elegant way.

How to use it:

1. This plugin requires jQuery library and Bootstrap framework loaded properly in your html document.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

2. Make sure to load the jQuery Multi-Step Modal plugin after jQuery.

<script src="multi-step-modal.js"></script>

3. The html structure to create a 3-step wizard with progress bar and back buttons.

<form class="modal multi-step" id="demo-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title step-1" data-step="1">Step 1</h4>
        <h4 class="modal-title step-2" data-step="2">Step 2</h4>
        <h4 class="modal-title step-3" data-step="3">Final Step</h4>
        <div class="m-progress">
          <div class="m-progress-bar-wrapper">
            <div class="m-progress-bar">
            </div>
          </div>
          <div class="m-progress-stats">
            <span class="m-progress-current">
            </span>
            /
            <span class="m-progress-total">
            </span>
          </div>
          <div class="m-progress-complete">
            Completed
          </div>
        </div>
      </div>
      <div class="modal-body step-1" data-step="1">
        This is step 1.
      </div>
      <div class="modal-body step-2" data-step="2">
        This is the second step.
      </div>
      <div class="modal-body step-3" data-step="3">
        This is the final step.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary step step-1" data-step="1" onclick="sendEvent('#demo-modal', 2)">Continue</button>
        <button type="button" class="btn btn-primary step step-2" data-step="2" onclick="sendEvent('#demo-modal', 1)">Back</button>
        <button type="button" class="btn btn-primary step step-2" data-step="2" onclick="sendEvent('#demo-modal', 3)">Continue</button>
      </div>
    </div>
  </div>
</form>

4. Active the plugin and done.

sendEvent = function(sel, step) {
  var sel_event = new CustomEvent('next.m.' + step, {detail: {step: step}});
  window.dispatchEvent(sel_event);
}

Changelog:

2019-03-25

• Switched trigger to javascript custom event.

2017-12-13

• Demo page update.

2017-11-17

• [FIX] Use modal-body for count steps instead of buttons

---

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