Simple Wizard Modal Plugin with jQuery and Bootstrap - Easy Wizard

Easy Wizard is a jQuery plugin used to create a wizard interface which displays your step by step progress in a Bootstrap modal window.

How to use it:

1. Make sure you have jQuery library and Bootstrap framework installed.

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

2. Download and include the jQuery easy wizard plugin's files in the webpage.

<link rel="stylesheet" href="easyWizard.css">
<script src="easyWizard.js"></script>

3. Insert you step by step progress into a Bootstrap modal.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
         </button>
        <h4 class="modal-title" id="myModalLabel">Easy Wizard</h4>
      </div>
      <div class="modal-body wizard-content">
        <div class="wizard-step"> Step 1 </div>
        <div class="wizard-step"> Step 2 </div>
        <div class="wizard-step"> Step 3 </div>
        <div class="wizard-step"> Step 4 </div>
      </div>
      <div class="modal-footer wizard-buttons"> 
        <!-- The wizard button will be inserted here. --> 
      </div>
    </div>
  </div>
</div>

4. Create a button to launch the wizard modal.

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

5. Initialize the wizard plugin.

$("#myModal").wizard();

6. A callback function triggered on finish.

onfinish:function(){
  // do something
}

Change log:

2015-06-24

• modifications to execute validation after execute next step

---

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