Create Step By Step Modal with jQuery and Bootstrap

Bootstrap Modal Steps is a jQuery plugin that splits a Bootstrap modal's body into several steps, like an interactive wizard interface.

How to use it:

1. Load the needed jQuery library and Bootstrap 3 framework on your web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

2. Load the jQuery Bootstrap Modal Steps plugin after jQuery JavaScript library.

<script src="src/jquery-bootstrap-modal-steps.js"></script>

3. Create a button to trigger a modal.

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

4. Create a step by step Bootstrap modal using data-step and data-title attributes.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="js-title-step"></h4>
      </div>
      <div class="modal-body">
        <div class="row hide" data-step="1" data-title="This is the first step!">
          <div class="jumbotron">This is step 1</div>
        </div>
        <div class="row hide" data-step="2" data-title="This is the second step!">
          <div class="jumbotron">This is step 2</div>
        </div>
	div class="row hide" data-step="3" data-title="This is the third and last step!">
          <div class="jumbotron">This is step 3</div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default js-btn-step pull-left" data-orientation="cancel" data-dismiss="modal"></button>
        <button type="button" class="btn btn-warning js-btn-step" data-orientation="previous"></button>
        <button type="button" class="btn btn-success js-btn-step" data-orientation="next"></button>
      </div>
    </div>
  </div>
</div>

5. Initialize the modal with default settings.

$('#myModal').modalSteps();

6. Available options and callbacks.

$('#myModal').modalSteps({
btnCancelHtml: 'Cancel',
btnPreviousHtml: 'Previous',
btnNextHtml: 'Next',
btnLastStepHtml: 'Complete',
disableNextButton: false,
completeCallback: function(){},
callbacks: {}
});

Change log:

2014-12-05

• v0.0.3

---

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