"POC EI wiz"
Bootstrap 3.0.0 Snippet by MrmRed

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h3>Bootstrap Wizard with Modal</h3> <hr> <a href="#myModal" role="button" class="btn btn-default btn-lg" data-toggle="modal">Start</a> <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Wizard Steps</h3> </div> <div class="modal-body" id="myWizard"> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="4" style="width: 20%;"> Step 1 of 5 </div> </div> <div class="navbar"> <div class="navbar-inner"> <ul class="nav nav-pills"> <li class="active"><a href="#step1" data-toggle="tab" data-step="1">Step 1</a></li> <li><a href="#step2" data-toggle="tab" data-step="2">Step 2</a></li> <li><a href="#step3" data-toggle="tab" data-step="3">Step 3</a></li> <li><a href="#step4" data-toggle="tab" data-step="4">Step 4</a></li> </ul> </div> </div> <div class="tab-content"> <div class="tab-pane fade in active" id="step1"> <div class="well"> <label>Security Question 1</label> <select class="form-control input-lg"> <option value="What was the name of your first pet?">What was the name of your first pet?</option> <option value="Where did you first attend school?">Where did you first attend school?</option> <option value="What is your mother's maiden name?">What is your mother's maiden name?</option> <option value="What is your favorite car model?">What is your favorite car model?</option> </select> <br> <label>Enter Response</label> <input class="form-control input-lg"> </div> <a class="btn btn-default next" href="#">Continue</a> </div> <div class="tab-pane fade" id="step2"> <div class="well"> <label>Security Question 2</label> <select class="form-control input-lg"> <option value="What was the name of your first pet?">What was the name of your first pet?</option> <option selected="" value="Where did you first attend school?">Where did you first attend school?</option> <option value="What is your mother's maiden name?">What is your mother's maiden name?</option> <option value="What is your favorite car model?">What is your favorite car model?</option> </select> <br> <label>Enter Response</label> <input class="form-control input-lg"> </div> <a class="btn btn-default next" href="#">Continue</a> </div> <div class="tab-pane fade" id="step3"> <div class="well"> <h2>Step 3</h2> Add another step here..</div> <a class="btn btn-default next" href="#">Continue</a> </div> <div class="tab-pane fade" id="step4"> <div class="well"> <h2>Step 4</h2> You're Done!</div> <a class="btn btn-success first" href="#">Start over</a> </div> </div> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <hr> </div>
$(document).ready(function(){ $('.next').click(function(){ var nextId = $(this).parents('.tab-pane').next().attr("id"); $('[href=#'+nextId+']').tab('show'); return false; }) $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { //update progress var step = $(e.target).data('step'); var percent = (parseInt(step) / 4) * 100; $('.progress-bar').css({width: percent + '%'}); $('.progress-bar').text("Step " + step + " of 4"); //e.relatedTarget // previous tab }) $('.first').click(function(){ $('#myWizard a:first').tab('show') }) });

Related: See More


Questions / Comments: