Multi-step modals for Bootstrap
Switch branches/tags
Nothing to show
Clone or download
ngzhian Fix #14
Fix the demo
Latest commit fcf7896 Dec 13, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Fix #1: add license Mar 6, 2015
README.md Update README.md Sep 11, 2016
index.html Fix #14 Dec 13, 2017
multi-step-modal.js [FIX] Use modal-body for count steps instead of buttons Nov 16, 2017
ss.png Add screenshot Sep 28, 2014

README.md

Multi-Step Modal

A library to help you make multi-step modals, such as a multi-page registration form.

It depends on bootstrap for the modal and jQuery for everything else.

Check out the demo

Screenshot of Multi-Step Modal

Quick start

Add the js file at the bottom of the page.

<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>
            </div>
            <div class="modal-body step step-1">
            This is step 1.
            </div>
            <div class="modal-body step step-2">
            This is step 2.
            </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()">Continue</button>
            </div>
        </div>
    </div>
</form>
<button class="btn btn-default" data-toggle="modal" data-target="#demo-modal">Show</button>
<script src="/path/to/multi-step-modal.js"></script>
<script>
sendEvent = function() {
    $('#demo-modal').trigger('next.m.2');
}
</script>

Follow these conventions:

  1. Your modals should have the class modal multi-step (boostrap requirement)
  2. Buttons that bring the user to the next step should have class step, and also the attribute data-step set to whichever step this button appears on. e.g. a button that is on step 1 (brings the user from step 1 to 2) should be <button type="button" class="step" data-step="1"></button>
  3. Content you want to show at step 1 should have class step-1, and so on.

How this works

There are conventions to follow This depends on bootstrap for modals, which are elements with the class modal.

For each modal on the page it attaches event listeners to 1. the modal 2. the buttons in the modal The modal and its buttons reac to a events of the form next.m.x, where x corresponds on the step the button show trigger the visibility of.

The close button is visible in all steps.

Progress indicators are available, visible in the demo.

Events based

Buttons have events bound, and modals also have the same events abount. When you want to transit into the next step, trigger the event on either a speicifc button or on the modal (which is easier).

FAQ

How to reset step on popup close?

This is not supported natively by the library, but you can do something like what is describe here.

License

MIT