21'C 흐림
서울 강남구
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.
$('#demo-modal').trigger('next.m.2');
HTML, JAVASCRIPT, Multi-step Modal Wizard Plugin With jQuery And Bootstrap - Multi-Step Modal